Geek Answers Handbook

How should I lazy-load Ext JS MVC controllers, views, stores and models?

We use Ext JS MVC as an interface technology of the plugin / host architecture where one host exists and many plugins can be easily installed via xcopy. Each plugin has an Ext JS application, and each plugin registers on page load. Shared Application - Single Page Application (SPA) .

The main problem that we are facing now is that we have more than 10 plugins installed, and each plugin has at least 10 controllers and more than 50 representations, stores and models. Thus, when we refresh our page (F5), we should sit and wait for almost 30 seconds for something around 200 HTTP requests to reach the server, and something around 3 megabytes of response will return.

Although caching has been applied, it is completely undesirable. Even for the first time. I think that even a layman would agree with this argument that in order to get milk you should not wait until a farm, cows, barns, houses, roads, electricity, a river, etc. are built.

A definite answer to this problem should be lazy-loading controllers, views, stores and models. However, we do not have a clear picture of what we must do to get this, and we cannot find a good, applicable answer on the Internet. Most discussions relate only to the lazy-loading requirement, but they did not mention how to do this. Take a look at this link, for example:

http://www.sencha.com/forum/showthread.php?130449-Large-Single-Page-Architecture-in-ExtJS-4.0

or this one:

http://www.sencha.com/forum/archive/index.php/t-156694.html?s=aaeec1ce30acbc9cbd2615afadec982f

If we use the Ext.require method, then we simply load our controllers as simple JavaScript files and they will not be included in our hierarchy to load our stores, views and models. We tested it.

On the other hand, we cannot find getController() and ControllerManager on Ext JS. They seem to have remained on Ext JS 4.1.3.

Any idea on how we can dynamically load controllers based on URL parameters (we might need a routing mechanism to dynamically parse URLs and load managers). Even a well-documented article or forum discussion with sample code can help us.

+4
source share
3 answers

For your problem, you should load the controller files into an event such as a menu click, etc. with Ext.require . after that you should initialize your controller.

I read the source of ExtJs and implement custom lazy boot controllers below.

 // this should run first time your application start Ext.application({ name: 'AppName', appProperty: 'appProp' }); // below lines should run when you want to load controllers // (for ex on menuitemclick) var controllers = ['yourController', 'anotherController']; Ext.require(controllers, function () { for (i = 0; i < controllers.length; i++) { var controllerName = controllers[i].substr(controllers[i].lastIndexOf(".") + 1); if (!AppName.appProp.controllers.get(controllerName)) { var controller = Ext.create(controllers[i], { application: AppName.appProp, id: controllerName }); controller.init(AppName.appProp); } } });
+3
source

Have you tried Ext.create ()?

http://docs.sencha.com/extjs/4.2.0/#!/api/Ext-method-create

This method will dynamically load your .js files and it seems to work well. However, there seems to be a cleaner way to do this.

0
source

At least in 4.2.0, it is available. From the "Archiving Your Application" tutorial ...

In large applications, you can load additional controllers at runtime. You can do this using the getController method. When you load additional controllers at run time, you must remember that you manually call the init method on the loaded controller.

 someAction: function() { var controller = this.getController('AnotherController'); // Remember to call the init method manually controller.init(); }

Here is the documentation link for this Ext.app.Application function.

0
source

More articles:


All Articles