MVC Application: Add Custom Events

Posted By Vitalii | June 26, 2012 | ExtJS 4.1.0
0 2970
Reply to thread

Js Code

Ext.define('App.controller.Main', {
	extend: 'Ext.app.Controller',
	stores: ['Users'],
	init: function () {
		this.log('controller init');

		//add event
		this.application.addEvents('UsersStoreLoaded');

		this.getUsersStore().on('load', function (store) {
			this.log('store on load');
			//fire event
			this.application.fireEvent('UsersStoreLoaded', store);
		}, this); // controller scope

		//handle event
		this.application.on('UsersStoreLoaded', function (store) {
			this.log('app on UsersStoreLoaded');
		});
	},
	log: function (msg) {
		this.application.log(msg);
	}
});
            

Render, AfterRender And BoxReady In ExtJS 4.1

Posted By Vitalii | April 26, 2012 | ExtJS 4.1.0
0 6924
Reply to thread

Note: boxready is a new event added in Ext 4.1.
Fires one time - after the component has been layed out for the first time at its initial size.

Js Code

Ext.define('App.controller.Main', {
	extend: 'Ext.app.Controller',
	views: ['TestPanel'],
	init: function () {
		this.control({
			'testpanel': {
				render: function () { this.log('testpanel render'); },
				afterrender: function () { this.log('testpanel afterrender'); },
				boxready: function () { this.log('testpanel boxready'); }
			}
		});
	},
	log: function (msg) {
		this.application.log(msg);
	}
});
            

Accordion Panel With Dynamic Content In ExtJS 4 MVC App

Posted By Vitalii | April 05, 2012 | ExtJS 4.0.7
0 3286
Reply to thread

Js Code

Ext.define('App.controller.Main', {
	extend: 'Ext.app.Controller',
	views: ['AccordionPanel'],
	init: function () {
		this.control({
			'accordionpanel > panel': {
				expand: this.onPanelExpand
			}
		});
	},
	onPanelExpand: function (panel) {
		if (panel.contentLoaded !== true && panel.name != 'panel-1') {
			panel.contentLoaded = true;

			var url;

			switch (panel.name) {
				case 'panel-2': url = '/postdata/getcontent/2'; break;
				case 'panel-3': url = '/postdata/getcontent/3'; break;
			}

			if (url) {
				Ext.Ajax.request({
					url: url,
					success: function (response) {
						panel.update(response.responseText);
					}
				});
			}
		}
	}
});
            

ExtJS 4 MVC Application Architecture

Posted By Vitalii | April 01, 2012 | ExtJS 4.0.7
0 11072
This post is a demo for MVC Architecture Guide

Note: In your app you should include only one script reference /scripts/app/app.js
All other scripts will be loaded by Ext.Loader
Sources in VS 2010 Solution

Js Code

// /scripts/app/controller/Users.js
Ext.define('AM.controller.Users', {
	extend: 'Ext.app.Controller',
	stores: [
		'Users'
	],
	models: [
		'User'
	],
	views: [
		'user.List',
		'user.Add',
		'user.Edit'
	],
	init: function () {
		this.control({
			'userlist': {
				itemdblclick: this.editUser,
				removeitem: this.removeUser
			},
			'userlist > toolbar > button[action=create]': {
				click: this.onCreateUser
			},
			'useradd button[action=save]': {
				click: this.doCreateUser
			},
			'useredit button[action=save]': {
				click: this.updateUser
			}
		});
	},
	editUser: function (grid, record) {
		var view = Ext.widget('useredit');
		view.down('form').loadRecord(record);
	},
	removeUser: function (user) {
		Ext.Msg.confirm('Remove User', 'Are you sure?', function (button) {
			if (button == 'yes') {
				this.getUsersStore().remove(user);
			}
		}, this);
	},
	onCreateUser: function () {
		var view = Ext.widget('useradd');
	},
	doCreateUser: function (button) {
		var win = button.up('window'),
			form = win.down('form'),
			values = form.getValues(),
			store = this.getUsersStore();
		if (form.getForm().isValid()) {
			store.add(values);
			win.close();
		}
	},
	updateUser: function (button) {
		var win = button.up('window'),
			form = win.down('form'),
			record = form.getRecord(),
			values = form.getValues(),
			store = this.getUsersStore();
		if (form.getForm().isValid()) {
			record.set(values);
			win.close();
		}
	}
});