Extjs創建多個controller實現多模塊MVC動態加載 完美破解版

思路如下:

moduleController中動態創建userController和roleController,userController和rolecontroller保留mvc模式管理各自對應模塊的組件(當然userController和roleController也可以動態創建其子模塊。)

我的moduleController其實就是最外層的border模塊,moduleController裡面的菜單是左邊的菜單“用戶管理”,“子系統管理”等,當點擊用戶管理按鈕或者子系統管理按鈕的時候,動態加載改模塊對應的controller。現在的代碼和圖片沒有對應上,因為現在代碼比較新,用的是舊圖,原理是一樣的。如下圖

 

 

修改步驟:

1:首先將

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邏輯走。

發佈留言