Ext JS 4.2.1 loading controller - best practice

Question

I am currently developing a Ext JS application with many views/controlers/... I am wondering myself what the best practice is for loading the JS controllers/views/and so on...

currently i have my application defined like this:

// enable javascript cache for debugging, otherwise Chrome breakpoints are lost
Ext.Loader.setConfig({ disableCaching: false });

Ext.require('Ext.util.History');
Ext.require('app.Sitemap');
Ext.require('app.Error');


Ext.define('app.Application', {
    name: 'app',

    extend: 'Ext.app.Application',

    views: [
        // TODO: add views here
        'app.view.Viewport',
        'app.view.BaseMain',
        'app.view.Main',
        'app.view.ApplicationHeader',

        //administration
        'app.view.administration.User'
         ...
    ],

    controllers: [
        'app.controller.Viewport',
        'app.controller.Main',
        'app.controller.ApplicationHeader',

        //administration
        'app.controller.administration.User',
        ...
    ],

    stores: [
        // stores in there..
    ]
});

somehow this forces the client to load all my views and controllers at startup and is calling all init methods of all controllers of course.. i need to load data everytime i chnage my view.. and now i cant load it in my controllers init function. I would have to do something like this i assume:

init: function () {
    this.control({
        '#administration_User': {
            afterrender: this.onAfterRender
        }
    });
},

Is there a better way to do this? Or just an other event?

Though the main thing i am questioning myself is if it is the best practice to load all the javascript at startup. Wouldnt it be better to only load the controllers/views/... which the client does need right now? Or should i load all the JS at startup?

If i do want to load the controllers dynamicly how could i do this? I assume a would have to remove them from my application arrays (views, controllers, stores) and create an instance if i do need it and mby set the view in the controllers init?!

What's best practice??

UPDATE

Would deftJS with its viewcontroller be a good alternative? What are the main pros and cons of deftJS ?

Answer 1

You can load all the controllers at start-up. See below link, tested 1000 controllers and it's fast:

Best practices for initializing and deconstructing controllers

Your best bet for a fast application is to have all the required files minimized and compressed into one file, using sencha cmd.

You shouldn't load data into a view in init as the ui isn't loaded yet, can do it on onLoad if you like.

I would load a view's data in afterrender or perhaps activated events.

Ideally, you would use a modular approach, where you call an init() method on a module which requires the controllers, views, and models for that module.