extjs4 MVC 多控制器 动态加载

当点击菜单时在主控制器上添加子控制器:

Ext.define('MyAPP.controller.MainController',{

    init:function(){

        this.control({

             'menulink':this.populateCenterPanel


        });


    },

    populateCenterPanel:function(){

        this.getController('ChildController');


    }


});

In launch function add listener to controller add event like this:

Ext.application({

     launch:function(){

        this.controllers.addListener('add',this.newControllerAdded,this);

    },

    newControllerAdded:function(idx,ctrlr,token){

        ctrlr.init();

    }

});

Now put code for dynamically embedding views in the viewport in init method of ChildController:

Ext.define('MyApp.controller.ChildController',{
    refs:[
        {ref:'displayPanel',selector:'pane[itemId = 'EnbedHere']'}
    ],
    init:function(){
        var panel = this.getDisplayPanel();
        panel.removeAll();
        panel.add({
             xtype:'mycustomview',
             flex:1,
             autoHeight:true
        });
    }
});

######################################################################################
其他：
一、可以在app类下的Controllers数组中申明多个controller
APP声明中，controllers不应该申明多个，虽然Extjs允许这么做，但是实际上我今天的试验表明，这么干的话，会在app初始化的时候，一次性将所有Controller都初始化完毕，这样其实有很多列表、树之类的控件也许很少用到，但是也被初始化了，尤其是我的Store中设置了AutoLoad=true，这样做的结果是一打开程序，就向后台发起了很多查询。

二、动态加载controller
经过学习和调试，我发现下面的语句可以实现动态加载controller

    var application = this.application;//获得当前的application
    Ext.require('namespace.controller.mycontrol',
            function(){
                var mycontrol = application.getController('namespace.controller.mycontrol');
                mycontrol.init(application);
            },this);
      }
在上面的回调函数中，调用了mycontrol的初始化方法，如果不这么做，init方法不被执行。

**********************************************************
调用require、getController获得control的方法，有点别扭的地方在于，
getController一个control对象，它的init方法要手工调用。
第二遍getController同一个control对象，注意千万不可再次执行init方法。这会导致init方法中注册的那些动作处理被重复注册，动作处理时会发生各种意想不到的错误。
我的解决方法是在application中保存一个当前已经初始化过的control数组，每次require之前先检查一遍有没有初始化过，如果有，那么就不要调用require函数了，直接调用getController获取。
**********************************************************

Ext.define('Demand.controller.Main', {//主控制器，实现一个页面主框架
extend: 'Ext.app.Controller',
stores: [ ... ], //主控制器自己的store
views: [... ],//主控制器自己的显示，一般我会做个border，分出东南西北中五个区，然后根据主界面的点击去创建和引入新的controller
controlarray:new Array(), //已经创建过的controller，初始为空
.......
......

//在主控的某个事件处理中，引入新controller
callAction:function(me, record, item, index, e){
//这个点击发生在导航树上，导航树的record中，有要引入的controll的名字。
var found = false;
for (var i=0;i<this.controlarray.length;i++){
if (this.controlarray[i] == record.get('mycontrol')){
//mycontroll就是新controller名字，找到就退出
found = true;
break;
}
}
if (!found){//没有找到，就创建它
Ext.require(record.get('mycontrol'),function(){//回调，创建后从app中拿回来
var mycontrol = application.getController(record.get('mycontrol'));
mycontrol.init(application); //手工init
this.loadstore(mycontrol);
//手工load数据，这里的手工load数据和手工init的理由一样
//因为controller不是在app中直接引入的，所以init和load数据都没有被自动执行
//注意，这里的load只load那些定义了autoLoad=true的store
},this);
this.controlarray.push(record.get('mycontrol'));
}else{//已经创建，所以直接执行
var mycontrol = application.getController(record.get('mycontrol'));
this.loadstore(mycontrol);
}



}