Ext JS 4.1.x 架構實戰：單一 Application 動態載入 MVC 模組 (Controller/View/Store 按需載入)

背景與挑戰

Ext JS 4 採用 MVC 架構，預設啟動時一次載入所有 Controller/View/Store，導致首頁載入緩慢。企業級應用常有數十個功能模組，需實現單一 Application 實例下，點擊選單才動態載入對應模組 (Controller 為入口，View/Store 隨之載入)。

核心難點

• Ext.application 只能建立一次，二次建立會覆蓋導致事件失效。
• 動態載入 Controller 後，需手動觸發 init、onLaunch 生命週期。
• View/Store 依賴 Ext.Loader 依名稱解析路徑，需遵循命名慣例。

解決方案：擴充 Application 與 Controller

Ext.Loader.setConfig({ enabled: true });
Ext.require(['Ext.app.Application', 'Ext.app.Controller']);

// 擴充 Controller：提供掛載點
Ext.app.Controller.implement({
    loadModel: function() {},      // 子類別覆寫載入 Models
    loadView: function() {},       // 子類別覆寫載入 Views
    getApplication: function() { return this.application; }
});

// 擴充 Application：核心動態載入邏輯
Ext.app.Application.implement({
    loadModule: function(controllers) {
        var me = this;
        controllers = Ext.Array.from(controllers);
        Ext.each(controllers, function(name) {
            if (!me.controllers.containsKey(name)) {
                // 1. 建立 Controller 實例
                var controller = Ext.create(
                    me.getModuleClassName(name, 'controller'), 
                    { application: me, id: name }
                );
                me.controllers.add(controller);

                // 2. 執行生命週期
                controller.loadModel();  // 優先載入 Model
                controller.init(me);     // 初始化 (綁定事件等)
                controller.onLaunch(me); // 啟動後邏輯
                controller.loadView();   // 動態建構 View 並綁定資料
            }
        });
    }
});

目錄結構範例

app/
  controller/
    Org.js          // 組織架構模組 Controller
    User.js
  view/
    org/
      OrgTree.js
      OrgUserGrid.js
    user/
      UserList.js
  store/
    OrgStore.js
    UserStore.js
  model/
    OrgModel.js
    UserModel.js

模組 Controller 實作範例 (Org.js)

Ext.define('MyApp.controller.Org', {
    extend: 'Ext.app.Controller',
    models: ['OrgModel'],
    stores: ['OrgStore'],
    views: ['org.OrgTree', 'org.OrgUserGrid'],

    loadModel: function() {
        this.getModel('OrgModel'); // 觸發載入
    },
    loadView: function() {
        // 視圖已在 views 陣列宣告，Ext.Loader 會自動載入
        // 若需動態建構實例，可在這裡 create 並加入容器
    },
    init: function(app) {
        this.control({
            'orgtree': { itemclick: this.onOrgTreeClick },
            'orgusergrid': { itemdblclick: this.onUserDblClick }
        });
    },
    onOrgTreeClick: function(view, record) {
        var store = this.getOrgStoreStore();
        store.load({ params: { orgId: record.get('id') } });
    }
});

頁面啟動與模組切換

// 主入口 app.js
Ext.application({
    name: 'MyApp',
    appFolder: 'app',
    controllers: [], // 初始不載入任何模組
    launch: function() {
        window.application = this; // 掛載全域變數供頁面呼叫
        // 建立主框架 (Viewport, TreePanel 選單等)
    }
});

// 頁面 (Razor/WebForm) 切換到「組織架構」模組
<script>
    application.loadModule("Org"); // 動態載入 Org Controller 及其相依
    var main = Ext.create('Ext.panel.Panel', {
        layout: 'border',
        items: [
            { xtype: 'orgtree', region: 'west', width: 250 },
            { xtype: 'orgusergrid', region: 'center' }
        ]
    });
    Global.ExtTabDoLayout(main); // 加入主 TabPanel
</script>

關鍵優勢

1. 單一 Application：避免多實例衝突，全域事件總線正常運作。
2. 按需載入：首頁只載核心框架，模組 JS 按使用者操作下載，大幅降低初始流量。
3. 生命週期完整：loadModel → init → onLaunch → loadView 符合 Ext JS 設計預期。
4. 隔離性：模組間透過 Application 通訊，不直接耦合。

遷移到 Ext JS 6+/Modern Toolkit 提示

Ext JS 6+ 內建 Ext.app.ViewController、Ext.app.ViewModel (MVVM) 並支援 Ext.mixin.Bindable，動態載入機制更成熟 (可用 Ext.require + Ext.create)。本文模式適用於 4.x/5.x 維護專案，新專案建議直接採用 Modern Toolkit + MVVM 架構。