View Full Version : Dynamic controllers loading

15 Feb 2012, 3:40 PM

I have a question regarding the way designer 2 handle MVC.

I have design several views with a controller for each :
let say :
mainview (just an empty viewport) -> maincontroller
secondview (empty tab form) -> another controller
third view (first tab) -> third controller

When i execute, i can see that everything that is link, is loaded (all the controllers, views, store, models,...)
In my application "controllers section" , i can see all the conttollers, but i would like to have just one "maincontroller" loaded first and then call the others when needed and if needed,

Reading the forum, I have see some solution, but none that can be handle directly from designer 2

any suggestion ?

16 Feb 2012, 5:12 AM
Ext JS 4 MVC should have all controllers loaded upfront.

16 Feb 2012, 7:48 AM
Sorry but the term up front doesn't means anything to me (french)

Then you mean that there is no way to add controller dynamicaly ... in case of large application for example ..or depending on certain variable ?


16 Feb 2012, 11:37 AM
This is not a desirable aspect of what the controllers are supposed to do. In this MVC architecture the controllers do event handling for your application. These events need to be established on page load. If you need certain events to be delayed until a component is rendered, you may want to think about encapsulating those actions in the components themselves. It is not a requirement to use controllers at all, it's just a nice way of organizing your code. If you would like to keep the event handling in controllers, it might be a good idea to load all your controllers, and have them wait for components to fire specific events to attach new events to them. Does this help answer your question?

16 Feb 2012, 11:54 AM
Looking into it more, if this is a completely desirable function for you even though not recommended, you could do something like this I believe...

var controller = Ext.create('My.app.Controller');

While your init() may look like this...

init: function() {
'myapppanel' : {
afterrender: this.onAfterRenderMyAppPanel

onAfterRenderMyAppPanel: function() {

This should in theory initialize your events on demand. Again, this is not recommended, but I believe it can be done this way.

17 Feb 2012, 1:19 AM
I have to test this ...

My concern was to see all this file loading in firebug before the application starts.

I'm just looking for a way to load independant part of the application only when needed.
At this moment, as soon as i load the controller, every store, model, and views loads at the same time.

I will test and come back to you with the create and init controller stuff


17 Feb 2012, 4:13 AM
Don't forget you should be doing a build at the end of development so your controller should be included

17 Feb 2012, 5:51 AM
This is a different question altogether. You can dynamically load any js files via the Ext.Loader.

paths: {
MyAppComponent: '/path/to/my/app/component/dir/'

//load the file from /path/to/my/app/component/dir/controllers/Controller1.js


NOTE: Since your app component will most likely require additional files, be sure to utilize the 'requires' config in your app component. Example:

Ext.define('MyAppComponent.view.Component1', {
requires: [

Ext.define('MyAppComponent.controllers.Controller1' {
views: [

This way, when you initialize 'MyAppComponent.controllers.Controller1', the loader will automatically look for 'MyAppComponent.view.Component1' which will then cascade to 'MyAppComponent.view.Component2' because they are all dependencies of eachother

17 Feb 2012, 6:04 AM
Ext.Loader shouldn't be used in production. Loading individual files is expensive.

17 Feb 2012, 6:08 AM
Ext.Loader shouldn't be used in production. Loading individual files is expensive.


I wholeheartedly agree with you. However, there are use cases where this functionality is desirable in a production environment. Just providing some light on the subject.

17 Feb 2012, 6:16 AM
There are better ways. If you want to dynamically load bundles or sub apps then have a JS file that a minified group of classes and then insert a script tag and load that minified file.

17 Feb 2012, 6:34 AM
Agreed. And that minified script file can be loaded using Ext.Loader. I do this in an app to load user plugins on demand. The plugins all have their own minified script files and when the user requests the use of a plugin it is loaded via Ext.Loader. Once they load this file, it is never dynamically loaded again even if they quit the application. Only if they remove the plugin, will the need to use Ext.Loader to load it again.