Web应用开发（前端）—Ext Js的MVC（3）

从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()的方法获取这个对象。