ExtJs4 MVC improves loading speed and dynamically loads Controller

The page built by the Company project using ExtJs4 MVC is too long to load the page for the first time due to the huge system. The company requires optimization. After a period of research, ExtJs4 MVC is implemented.

Dynamically load the js file of the required component as required, that is, dynamically load the corresponding Controller file. Other files will be automatically referenced.

The following lists the key code and effects of the Demo. (The overall MVC framework is not described in detail)

Create a test Demo directory

Program entry:

 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 });

Entry Controller file:

 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 });

Sub-module Controller file:

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: 'content management'}); 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 });

First run the program effect:

Only the MVC-related files related to the program entry are loaded.

 

Click content management on the left to load the corresponding module:

Add only MVC-related files related to the load-Click module.

 

The huge project system dynamically loads js files under relevant modules as needed, which can improve the system running efficiency.

After testing, the loading speed of the system for the first time has indeed been greatly improved.