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??