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.onItemClick
24             }
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.gridItemClickFun
26             }
27         });
28     },
29     gridItemClickFun: function (view, record, item, index, e, eOpts) {
30         alert(record.get('name'));
31     }
32 });

初次运行程序效果：

加载的js文件只有与程序入口相关的MVC相关文件。

 

点击左侧内容管理加载相应模块效果：

只加与载点击模块有关的MVC相关文件。

 

项目庞大的系统，按需动态加载相关模块下的js文件，可以提升系统的运行效率。

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

 

转载于:https://www.cnblogs.com/servant/archive/2013/04/01/ExtJs4mvc%e5%8a%a8%e6%80%81%e5%8a%a0%e8%bd%bdController.html