ExtJs4 MVC 提高加载速度 动态加载Controller

公司项目使用ExtJs4 MVC搭建的页面 由于系统庞大导致首次加载页面时间过长，公司要求优化，经过一段时间的研究实现ExtJs4 MVC 

根据要求动态加载所需组件的js文件，也就是动态加载相应的Controller文件，其他文件会自动引用。

以下列出实现的Demo关键代码和效果。（不对MVC整体框架进行详细介绍）

建立测试Demo目录

程序入口：

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文件：

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文件：

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文件，可以提升系统的运行效率。

经测试首次加载系统的速度确实比原来有很大提升。