从MVC的设计模式来说，View负责展示层，那对于控件的事件，自然要放在Controller里面实现。
Controller的实现，需要定义一个Controller对象
Ext.define('MyApp.controller.Users', {
extend: 'Ext.app.Controller',
init: function() {
console.log('Initialized Users! This happens before ' +
'the Application launch() function is called');
}
});
当然Controller需要在Application加载的时候同时加载进来。所以在之前介绍Ext.Application的时候，除了加载View ，还需要加载对应的Controller.
Ext.define('MyApp.controller.Users', {
extend: 'Ext.app.Controller',
init: function() {
console.log('Initialized Users! This happens before ' +
'the Application launch() function is called');
}
});
以下是我在图书管理系统中所写的LoginController
Ext.define('Library.controller.Login', {
extend: 'Ext.app.Controller',
refs:[
{ref:'userId',selector:'#txtUserId'},
{ref:'loginForm',selector:'loginForm'}
],
init: function() {
var me = this;
me.control({
'#btnSubmit':{
click:me.fnLogin
},
'#formLogin':{
show:me.fnShow,
close:me.fnClose,
}
})
},
/**
* Login function
*/
fnLogin:function(){
var me = this;
var valid = me.getLoginForm().getForm().isValid();
if(valid){
me.getLoginForm().getForm().submit({
success:function(form,action){
me.user = action.result.userInfo;
me.getLoginForm().close();
},
failure:function(form,action){
alert(action.result.msg);
}
});
}
},
fnClose:function(){
this.getController('Library').fnAfterSignIn(this.user);
Ext.getBody().unmask();
},
fnShow:function(){
Ext.getBody().mask();
this.getUserId().focus(true,true);
}
});
me.control 里面定义了view中控件的事件。
这里需要说明一下refs属性。
refs的功能和selector相似，给选择器定义了别名，在这个controller内，就可以用get方法来获取该选择器以替代Ext.getCmp("XXX")的方式。
如上文中定义了
{ref:'loginForm',selector:'loginForm'}则在该Controller中，可以通过this.getLoginForm()的方法获取这个对象。