The extjs4.1.x framework is built using application to dynamically load MVC modules as needed.

We have developed the MVC module after extjs4, and split the previous JS files into small JS modules [model \ view \ controller \ store \ form \ data]. through controller splicing and bonding, the reusability and readability of JS Code are improved, which is more suitable for the development of the team.

When JavaScript uses MVC, it will inevitably bring about a problem. How to efficiently load various small JS files?

The official example uses a unified Ext. Application Portal:

Ext.application({    name: 'WMS',    appFolder: 'ExtJs/App',    autoCreateViewport:true,    controllers: [       'controller1','controller2','controller3'    ],    launch: function() {           //    }});

Since an application has only one entry, that is, an application, this will bring about a problem. My project has many controller files and all JS files need to be loaded when the system starts, this is obviously not what we want. We want to load as needed, and load JS module files as needed during page rendering.

Let's look at the following framework example. Simply put, I click "organizational structure" in the function menu tree and load the required JS files when opening the new tab page.

Because the IFRAME method is not used to load tab pages, this will bring more problems. After all, it is integrated with the entire framework, and there are many issues to consider. The benefits are also obvious. You do not need to load necessary extjs library files every time.

// Method for loading the tab page nodeclick: function (view, record) {If (record. data. leaf = true) {var Panel = ext. getcmp (record. ID); If (! Panel) {Panel = {ID: record. ID, closable: True, Title: record. data. text, iconcls: record. data. iconcls, autoscroll: True, border: false, layout: 'fit ', autoload: {// URL: record in autoload mode. data. URL, scope: This, scripts: True, text: 'loading the page. Please wait .... '}; this. opentab (panel, record. ID);} else {var main = ext. getcmp ("viewportcoretab"); main. setactivetab (panel) ;}}, opentab: function (panel, ID) {Var o = (typeof Panel = "string "? Panel: Id | panel. ID); var main = ext. getcmp ("viewportcoretab"); var tab = Main. getcomponent (o); If (Tab) {main. setactivetab (Tab);} else if (typeof panel! = "String") {panel. ID = O; var P = Main. Add (panel); main. setactivetab (p );}},

 

Let's get down to the truth. It's still the problem. I dynamically loaded the JS module file in the tab and read the following article from my brother, which solved the big problem.

Http://www.nnwnn.com/a/bianchengjiaocheng/2012/0920/17461.html

First, I will use the official user demo instead of the content on the "organizational structure" page. The directory architecture is as follows:

 

The format on the organizational structure page is as follows (not sorted, archived separately JS)

@ {Viewbag. title = "organizational structure management" ;}< SCRIPT> Ext. define ('module. usermodule ', {extend: 'ext. app. application ', ID: "org", name: 'am', appfolder:'/extjs/app', controllers: ["users"], launch: function () {}}); Ext. require ("module. usermodule ", function () {var APP = ext. create ('module. usermodule'); // The app Ext. onready (function () {// you must wait for the user to complete the creation of the module's app before executing var main = new Ext. panel ({border: false, layout: 'fit', items: [{xtype: 'userlist'}]}); // you need to add it to the tab in the autoload mode, otherwise, the entire viewport is used by default. exttabdolayout (main) ;}); </SCRIPT>

Okay, so far, we have solved the method of loading JS modules as needed.

HoweverThe new question comes again [Extjs is really painful.]. After a new application is introduced, the original page event is refreshed.

Init: function () {This. control ({// here, the event of clicking a tree node in my entire framework is missing (probably this problem) 'panel> userlist dataview': {itemdblclick: This. edituser}, 'useredit button [Action = save] ': {Click: This. updateuser }});},

 

Continuing study ....