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 ?

score 4 · Accepted Answer · edited May 23 '17 at 12:21

4

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.

edited May 23 '17 at 12:21

Community

1
1

answered Jun 24 '13 at 22:17

Neil McGuigan

46,580
12
123
152

In your answer of your linked post the user catalinux wrote something about DeftJS. I looked a bit into it though its new to me. What are the main pros/cons for it? Is there any downside using DeftJS ? – JuHwon Jun 25 '13 at 08:00
1

I like Deft for its IoC and deferred/promises, but I think they screwed up their selectors for MVC. For example you can't select all the fields in a form with Deft, but can with regular extjs mvc. – Neil McGuigan Jun 25 '13 at 20:34
2

@NeilMcGuigan I've just started using DeftJS and I can tell you that last statement (can't use complex selectors) is not true. However the scope of the selector is limited to the children of the controlled view. Which IMO is a very good thing: regular ExtJS allows you to select anything from any controller, which leaves the door wide open for creating hidden dependencies. To me, ExtJS' "MVC" was very poorly designed and DeftJS finally brought some sense into the architecture of an Ext app. – RIAstar Aug 18 '13 at 12:31
@RIAstar . Looks like they've made some changes in last version. Still not sure how to select say all textfields in a form. Do you know how to do that? – Neil McGuigan Aug 18 '13 at 17:15
I think it's been there all along, just maybe a bit harder to find in the docs. You can find an example near the bottom of the ["Accessing views" wiki page](https://github.com/deftjs/DeftJS/wiki/Accessing-Views) (last code block). Would be something like `control: { textfields: { selector: 'textfield', listeners: { change: 'handleChange' } } }`. – RIAstar Aug 19 '13 at 07:57

Ext JS 4.2.1 loading controller - best practice

1 Answers1