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