ExtJs4 MVC 提高載入速度 動態載入Controller

公司項目使用ExtJs4 MVC搭建的頁面 由於系統龐大導致首次載入頁面時間過長，公司要求最佳化，經過一段時間的研究實現ExtJs4 MVC 

根據要求動態載入所需組件的js檔案，也就是動態載入相應的Controller檔案，其他檔案會自動引用。

以下列出實現的Demo關鍵代碼和效果。（不對MVC整體架構進行詳細介紹）

建立測試Demo目錄

程式入口：

 1 Ext.Loader.setConfig({ 2     enabled: true 3 }); 4  5 var application = new Ext.app.Application({ 6     name: 'GxhDemo', 7     appFolder: 'GxhDemo', 8     autoCreateViewport: true, 9     controllers: [10         'GxhDemoController'11     ],12     launch: function () {13         Ext.tip.QuickTipManager.init();14     }15 });

入口Controller檔案：

 1 Ext.define('GxhDemo.controller.GxhDemoController', { 2     extend: 'Ext.app.Controller', 3     views: [ 4         'GxhDemoLayout.GxhNorth', 5         'GxhDemoLayout.GxhCenter', 6         'GxhDemoLayout.GxhWest' 7     ], 8     stores: [ 9         'GxhDemoLayout.GxhWestStore'10     ],11     models: [12         'GxhDemoLayout.GxhWestModel'13     ],14     refs: [15         {16             ref: 'gxhcenter',17             selector: 'gxhcenter'18         }19     ],20     init: function (app) {21         this.control({22             'gxhwest': {23                 'itemclick': this.onItemClick24             }25         });26     },27     onItemClick: function (tree, record, item, index, e, eOpts) {28         var self = this;29         var selected = record;30         if (selected.get('id') == 'nrgl') {31             Ext.require("GxhDemo.controller.BHCMSController", function () {32                 var bhcmsController = application.getController('BHCMSController');33                 bhcmsController.init(self);34             }, self);35         } else if (selected.get('id') == 'wdgzt') {36             Ext.require("GxhDemo.controller.BHINFOController", function () {37                 var bhinfoController = application.getController('BHINFOController');38                 bhinfoController.init(self);39             }, self);40         }41     }42 });

子模組Controller檔案：

 1 Ext.define('GxhDemo.controller.BHCMSController', { 2     extend: 'Ext.app.Controller', 3     views: [ 4         'BHCMS.BHCMSPanel', 5         'BHCMS.BHCMSGrid' 6     ], 7     stores: [ 8         'BHCMS.BHCMSGridStore' 9     ],10     models: [11         'BHCMS.BHCMSGridModel'12     ],13     init: function (app) {14         var center = app.getController('GxhDemoController').getGxhcenter();15         var bhcmsPanel = center.child('bhcmspanel');16         if (!bhcmsPanel) {17             var bhcmsPanel = Ext.widget('bhcmspanel', { title: '內容管理' });18             center.add(bhcmsPanel);19             center.setActiveTab(bhcmsPanel);20         } else {21             center.setActiveTab(bhcmsPanel);22         }23         this.control({24             'bhcmsgrid': {25                 'itemclick': this.gridItemClickFun26             }27         });28     },29     gridItemClickFun: function (view, record, item, index, e, eOpts) {30         alert(record.get('name'));31     }32 });

初次運行程式效果：

載入的js檔案只有與程式入口相關的MVC相關檔案。

 

點擊左側內容管理載入相應模組效果：

只加與載點擊模組有關的MVC相關檔案。

 

項目龐大的系統，按需動態載入相關模組下的js檔案，可以提升系統的運行效率。

經測試首次載入系統的速度確實比原來有很大提升。