Extjs创建多个controller实现多模块MVC动态加载

首先将

Ext.application({
    name: 'IV',
    appFolder: 'js/app',
    autoCreateViewport:true,
    controllers: [
       'config.ModuleController','config.user.UserController',''config.system.UserController''
    ],
    launch: function() {
        Ext.tip.QuickTipManager.init();
    }
});

改为：

    var application = new Ext.app.Application({
        name: 'IV',
        appFolder: 'js/apps/mainApp',
        autoCreateViewport:true,
        // requires:['Module.SubSystemModule','Module.UserModule'],
        controllers: [
          // 'config.ModuleController','config.user.UserController'
          'ModuleController'
        ],
        launch: function() {
        //Ext.Msg.alert('1','323333333');
          Ext.tip.QuickTipManager.init();
        }
    });

说明：将application定义到外面。方便controller引用。（也可以不用定义到外面，因为controller里面的init方法能拿到applicaiton的引用）

然后：在moduleController里面的按钮菜单点击处理函数里面代码如下：

 onSelectionChange: function(thisview, record, eOpts){
        var self = this;
       var selected = record;
        if(selected.get('module') =='userModule'){
          Ext.require("IV.controller.UserController",function(){
             var userController = application.getController('UserController');
             userController.init(application);
          },self);
        }else if(selected.get('module') =='roleModule'){
             Ext.require("IV.controller.RoleController",function(){
                var roleController = application.getController('RoleController');
                roleController.init(application);
            },self);
        }
    }

注意

  Ext.require("IV.controller.UserController",function(){
             var userController = application.getController('UserController');
             userController.init(application);
          },self);

先加载userController。然后再加载完成后，通过application的getController方法实例化UserController，并注册UserController到application中。然后手动调用该controller的init方法。因为你是动态加载该controller的，如果这里不执行init方法将application传过去的话，controller里面的init方法是不会自动执行的。application的源码里面也是这么干的。。so我也这么干。

2：然后：

在我的userController里面的init方法如下：
 init: function(app) {
         this.control({
             'userGrid': {
                 'itemclick':this.gridItemClickFun
             }
         });
         var center = app.getController('ModuleController').getCenter();
         var userPanel = center.child('userPanel');
         if(!userPanel){
             var userPanel =  Ext.widget('userPanel',{title:'系统设置>用户管理'});
             center.add(userPanel);
             center.setActiveTab(userPanel);
         }else{
             center.setActiveTab(userPanel);
         }
    },

我需要通过application来获得moduleController的引用，并根据moduleController来获得里面的center组件（一个tabPanel）。然后将UserController对应模块里面的UserPanel添加到center组件的tab中。（这个userPanel就类似于moduleController中的viewPort，userPanel以及其里面的子元素，都可以遵循mvc模式在userController里面进行管理了。）。之后userController里面的代码逻辑就照正常MVC逻辑走。