Extjs建立多個application實現多模組MVC動態載入。。

原創作品：勿轉載。(這麼做會有問題。。controller裡面的control註冊的事件會丟失。~~~先不這麼弄了哦。官方好像好像是一個應用一個application。有實現的方法，但是修改起來代碼不好理解，萬一出了問題還不好修改，所以還是不逆天了。貌似4.2裡面應該會支援動態載入controller。。看到了getApplication的api，通過application的getController方法可以註冊controller，controller再執行個體化，並註冊相關view的事件。)

通過動態建立controller來實現多模組Mvc

傳送門：http://blog.csdn.net/jiushuai/article/details/8185884

java進階交流群：37341439   歡迎各位朋友一起交流。

這幾天用extjs4.1做項目，有很多功能模組，使用mvc開發，系統有很多功能模組。如果用一個application進行開發，那麼所有功能模組的js都得全部載入。。。。很恐怖。。

例如：

圖片

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

說明：

config.ModuleController是主模組，（其實就是這個介面，主介面裡面點擊左邊的按鈕“使用者管理”，“子系統管理”來操作各個子系統）

'config.user.UserController'是使用者管理模組

‘config.system.UserController''是子系統管理模組。

如果這樣做的話，那麼頁面一載入就得把這3個模組相關的js檔案都載入進來，即使還沒有點擊“子系統管理模組”的按鈕，但是子系統管理模組的相關js也會載入進來，比較佔用資源（因為extjs會將controller裡面配置的view和model和store的檔案以及依賴都載入進來）

實現按需載入方法：

將以上的appication代碼修改如下：

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

這樣就只載入主系統相關的js

然後建立各個子系統的app目錄：裡面的目錄結構也是 controller,view,model,store，

然後再點擊左邊按鈕的時候，載入子系統的指令碼如下（代碼例子是載入使用者管理子模組）：

Ext.Loader.setPath('Module','js/module');
            Ext.require("Module.UserModule",function(){
                var app = Ext.create('Module.UserModule');          //需要建立user管理模組的app
                Ext.onReady(function(){                                 //必須要等user管理模組的app建立完成後才執行
                    var userPanel = center.child('userPanel');
                    if(!userPanel){
                        var userPanel =  Ext.widget('userPanel',{title:'系統設定>使用者管理'});
                        center.add(userPanel);
                        center.setActiveTab(userPanel);
                    }else{
                        center.setActiveTab(userPanel);
                    }
                });
});

說明：

以上例子的'js/app'就是user管理模組的根目錄。

使用者管理模組採用的首碼都是UM，（主模組用的是IV）

js/module目錄是放置user管理模組的application定義：如下：

Ext.define('Module.UserModule', {
    extend: 'Ext.app.Application',
    name: 'UM',
    appFolder: 'js/userApp',
    controllers: [
        "config.user.UserController"
    ],
    launch: function() {
    }
});

  Ext.require("Module.UserModule",function(){})載入了user管理模組的application。 reauire方法的第二個參數是載入完後的回呼函數。

當載入完user管理模組的application定義以後需要 執行個體化該application。

var app = Ext.create('Module.UserModule');    

執行個體化後才會將application裡面的依賴js給載入，不執行個體化的話，是不會載入依賴的。

然後需要在Ext.onReady()裡面去執行接下來的操作。