Dynamic controllers loading

[tyfab]

Hi,

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 ?

[mitchellsimoens]

Ext JS 4 MVC should have all controllers loaded upfront.

[tyfab]

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 ?

fabrice

[sskow200]

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?

[sskow200]

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');
 controller.init()

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

init: function() {
   this.control(
       'myapppanel' : {
               afterrender: this.onAfterRenderMyAppPanel
       }
   );
},

onAfterRenderMyAppPanel: function() {
     console.log('Rendered');
}

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

[tyfab]

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

fabrice

[mitchellsimoens]

Don't forget you should be doing a build at the end of development so your controller should be included

[sskow200]

This is a different question altogether. You can dynamically load any js files via the Ext.Loader.

     Ext.Loader.setConfig({
           paths: {
                 MyAppComponent: '/path/to/my/app/component/dir/'
           }
     })
     
     //load the file from /path/to/my/app/component/dir/controllers/Controller1.js
     Ext.require('MyAppComponent.controllers.Controller1');
     Ext.syncRequire('MyAppComponent.controllers.Controller1');

http://docs.sencha.com/ext-js/4-0/#!...method-require
http://docs.sencha.com/ext-js/4-0/#!...od-syncRequire


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: [
       'MyAppComponent.view.Component2'
   ]
});

Ext.define('MyAppComponent.controllers.Controller1' {
    views: [
         'MyAppComponent.view.Component1'
    ]
});

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

[mitchellsimoens]

Ext.Loader shouldn't be used in production. Loading individual files is expensive.

[sskow200]

Ext.Loader shouldn't be used in production. Loading individual files is expensive.

@mitchellsimoens

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.