ExtJs dynamic loading on demand (Multi-app Mode)

In Extjs, the following two methods can be used after testing to dynamically load js files:

1. Under an application instance

In this case, you can use the Ext. require () function to dynamically load js files as needed. Take loading a controller as an example:

 Ext.require('MyApp.controller.event.Bases',function(){                            MyApp.getController('event.Bases').init();                            tab = me.getTabpanel().add({                                xtype: view,                                closable: true,                                animate : true,                                iconCls: 'icon-rights',                                title: record.raw.menuName                            });

This controller is MyApp. controller. event. Bases. When you use Ext. require () to load a specified file, the file is obtained only through the network, that is

The MyApp. controller. event. Bases. js file does not load the model, store, and view on which the controller depends. You need to call

The MyApp. getControoler () method initializes the obtained controller file and calls its init () method to load the dependent store, model, and view files. In addition,

View the getController source code of Ext. app. Application:

 getController: function(name) {        var me          = this,            controllers = me.controllers,            className, controller;        controller = controllers.get(name);        if (!controller) {            className  = me.getModuleClassName(name, 'controller');            controller = Ext.create(className, {                application: me,                id:          name            });            controllers.add(controller);            if (me._initialized) {                controller.doInit(me);            }        }        return controller;    },

By reading the source code of the getController file, we can see that through the getController method, we first obtain the className of the corresponding controller, and then use Ext. create ()

Method To create a controller and add the controller to the controllers of the corresponding MyApp instance. The most important thing is to call the controller. doInit () method to initialize the controler,

Load the corresponding store, model, and view files and call the init () method. Therefore, the dynamic loading process can be simplified under a single application:

  MyApp.getController('event.Bases').init();

To enable Ext. Loader dynamic loading, You need to perform the following settings:

Ext.Loader.setConfig({enabled : true});

2. Multi-instance application

First, the test is carried out in ExtJs 4.1. In a large system, the business can be divided into modules. Each module can create an application separately. When a specified module needs to be loaded, the corresponding

Application, and load its dependent files to achieve On-Demand Loading of each module. Compared with loading all files at a time, the system starts to load faster.

When loading each module, you can use the loader attribute or load iframe. In the iframe usage, the file will be repeatedly loaded, which is not described here. The following describes the loader.

Method. In ExtJs4.1, if the left side is treepanel and the right side is tabpanel, click the tree node on the left to load the corresponding application for the modules, and click tabpanel on the right.

When you click the tree node on the left, click the corresponding function to add:

 panel = tab.add(Ext.create('Ext.panel.Panel', {                id :  record.raw.id,                title : record.raw.text,                layout : 'fit',                loader : {                    url : record.raw.url,                    autoLoad : true,                    scripts : true                },                autoShow : true,                autoRender : true,                tabTip : record.raw.text,                border : false,                renderTo : Ext.getBody(),                closable : true            }));

In the loader attribute, the url is the specified html file to be loaded, such as app/logApp/logList.html. In this html, The js file corresponding to this module is referenced. Its format is as follows:

    <script type="text/javascript" src="app/logApp/logListApp1.js"></script>

Add a tag in html to render the page created by this module to this tag. As described below, if this tag is not available, the page cannot be rendered, and in a system,

The id of each module must be unique. Examples of js files referenced by html are as follows:

Ext.Loader.setConfig({    enabled : true});Ext.application( {    name : 'LogListApp',    appFolder : 'app/logApp',    autoCreateViewport : false,    controllers : [ 'log.LogInfos'    ],    launch : function() {        console.log('logListApp launch!');        Ext.create('Ext.panel.Panel', {//            html: '
World!
',            renderTo: 'logpanel',            items:[{                xtype: 'loginfolist'            }]        });    }});

Create an application in this file, and then reference the corresponding controller and create a page to render the page to the tag through renderTo. In ExtJs 4.1, you can use

Ext. create creates an app. MyApp is used as the global application instance variable (namespace), but there will be a serious problem in ExtJs4.1: the creation of a new application

It will overwrite the event listening previously registered by the application, and the listening will become invalid, which will be devastating. There are two solutions to the test:

(1) modify the registration method of the registration listener

The original event registration method may be as follows:

this.control({'viewport navigatorheader button[action=login]': {click: this.login)

Modify the registration method as follows:

         'viewport':{                render: function(view){                    view.down('navigatorheader button[action=login]').on('click',this.login);                }}

Register all the page events to the corresponding functions of render. In this way, the events of each module remain valid in ExtJs4.1.

(2) Reference ExtJs 4.2

Event invalidation may be a bug in ExtJs4.1. After version 4.2 is referenced, you do not need to modify the event registration method, but the application creation method changes,

If you still call Ext. create ('ext. app. the application cannot be instantiated in applicaton ', {}) mode. You need to change the creation method. In the document of Version 4.2, we recommend that you create an application as follows:

Ext.application({    name: 'MyApp',    launch: function() {        Ext.create('Ext.container.Viewport', {            items: {                html: 'My App'            }        });    }});

The corresponding application instance can be obtained through the following method:

var app = MyApp.getApplication();

So far, we have discussed the problem of dynamic loading under multiple apps.

Possible problems:

1. If there is no association between modules and there is no mutual application, dynamic loading in Multi-app mode should be normal.

2. If there is an association between each module and there is mutual reference between the modules, then reference another module variable in one module. Because the corresponding file is not loaded, the application will not be available and an error will occur,

You can use Ext. require () to load part of the required files. This method is also not available and you need to find a better solution.