Ext JS

从 Ext.app.Controller 的 refs 说起

View

Ext.define('MyApp.view.usersView', {
	extend: 'Ext.grid.Panel',
	alias: 'widget.usersView',
	id: 'usersView'
	store: 'usersStore',
	// ...
	dockedItems: [ {
		dock: 'top',
		xtype: 'toolbar',
		autoShow: true,
		enableOverflow: true,
		layout: {
			overflowHandler : 'Menu'// items 溢出处理
		},
		items: [ {
			xtype: 'button',
			text: '搜索',
			margin: '0,0,0,20',
			icon: 'resources/icons/search.png',
			action: 'search'
		}, '-', {
			xtype: 'button',
			text: '刷新',
			margin: '0,0,0,20',
			icon: 'resources/icons/refreshGrid.png',
			handler: function(){
				usersCtrl.refreshGrid();
			}
			// action: 'refreshGrid'
		} ]
	} ]
});

 

Store

Ext.define('MyApp.store.usersStore', {
	extend: 'Ext.data.Store',
	alias: 'widget.usersStore',
	model: 'usersModel',
	listeners: {
		beforeload: function(){
			var view = Ext.getCmp('usersView');
			if(view){
				var p1 = view.down('combobox[name="xxx"]').getValue();
				var p2 = view.down('textfield[name="yyy"]').getValue();
			}
			Ext.apply(this.proxy.extraParams, {
				'param1': p1,
				'param2': p2
			});
		},
		proxy: {
			type: 'ajax',
			url: '',
			reader: {
				type: 'json',
				root: 'zzz',// json 数据格式：{'zzz':{}}
				totalProperty: 'totalCount'
			}
		},
		autoLoad: true
	}
});

 

Controller

Ext.define('MyApp.controller.usersController', {
	extend: 'Ext.app.Controller',
	refs: [{
		ref: 'list',
		selector: 'usersView'
	}],
	views: ['usersView'],
    models: ['usersModel'],
    stores: ['usersStore', 'adminUsersStore'],

    init: function() {
		usersCtrl = this;// 方便在 view、store 上面使用 ctrl 调用方法
        this.control({
			'usersView button[action=search]': {
				click: this.search
			},
			// 如果 view 上，按钮用的是 handler，则这部分代码可以直接省略
			/*'usersView button[action=refreshGrid]': {
				click: this.refreshGrid
			}*/
		});
    },
	// usersView 上的 2 个按钮，刷新与搜索方法
	search: function(){
		this.getUsersStoreStore().load();
	},
	refreshGrid: function(){
		// refs 中 selector 为 usersView 的 ref 为 list，所以 getList() 即可得到 usersView
		this.getList().store.load();// 方式一：grid 获取 store
		this.getList().getStore().load();// 方式二：grid 获取 store
	
		this.getUsersStoreStore().load();// stores: ['usersStore']
	}
});

Controller 下 models: []、views: []、stores: [] 配置项

/**
 * models: []
 */
Ext.define("MyApp.controller.Foo", {
     extend: "Ext.app.Controller",
     models: ['User', 'Vehicle']
 });

This is equivalent of:（等价于）

Ext.define("MyApp.controller.Foo", {
     extend: "Ext.app.Controller",
     requires: ['MyApp.model.User', 'MyApp.model.Vehicle'],

     getUserModel: function() {
         return this.getModel("User");
     },

     getVehicleModel: function() {
         return this.getModel("Vehicle");
     }
 });

// 就是说，controller 的 models 数组配置里，添加了哪些 model，实际上就是将需要的 model 以 requires 做了动态加载，而且同时，还自动生成了 getter 方法。

// 同理，对于 views: [] 和 stores: []，与 models: [] 理解一致。

/*
 * views: []
 */
Ext.define("MyApp.controller.Foo", {
 extend: "Ext.app.Controller",
 views: ['List', 'Detail']
});

This is equivalent of:（等价于）

Ext.define("MyApp.controller.Foo", {
 extend: "Ext.app.Controller",
 requires: ['MyApp.view.List', 'MyApp.view.Detail'],

 getListView: function() {
	 return this.getView("List");
 },

 getDetailView: function() {
	 return this.getView("Detail");
 }
});

/*
 * stores: []
 */
Ext.define("MyApp.controller.Foo", {
 extend: "Ext.app.Controller",
 stores: ['Users', 'Vehicles']
});

This is equivalent to:（等价于）

Ext.define("MyApp.controller.Foo", {
 extend: "Ext.app.Controller",

 requires: [
	 'MyApp.store.Users',
	 'MyApp.store.Vehicles'
 ]

 getUsersStore: function() {
	 return this.getStore("Users");
 },

 getVehiclesStore: function() {
	 return this.getStore("Vehicles");
 }
});