从 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");
}
});