Adding controller dynamically into app.js controllers: [] - Ext-JS 4

Question

I have a big app so I didn't add things in my app.js:

stores: []
controllers: []
views: []
models: []

Inside those are only things that I need for application to be created. So, when I click on the node (left panel) how can I create the controller I need and load model, view, store and other things in that controller? Is it enough just to call controller (because they are imported in controller)?

Something like

Ext.create('MyApp.path.SomeController');

Would it be added just like if I would add it in controllers: [] in app.js?

score 3 · Answer 1 · answered Dec 04 '12 at 22:01

3

From my app.js, (thus this is an Ext JS application):

addController: function (name) {
        var c = this.getController(name); //controller will be created automatically by name in this getter 
        //perform the same initialization steps as it would have during normal ExtJs process
        c.init(this);
        c.onLaunch(this);
    }

name being the class name...

Remembering as well you can get a handle on the application instance from any other controller via this.application

answered Dec 04 '12 at 22:01

jenson-button-event

18,101
11
89
155

Does it have to be a full name: 'MyApp.file.controller' or just 'controller'? Thank you for answer. :) – Dec 04 '12 at 22:03
full class name: 'MyApp.file.controller' – jenson-button-event Dec 04 '12 at 22:10
How can I get reference to my application (like you got with this) because I can't do .getController method? – Dec 05 '12 at 19:17
Within which scope? Within the controller scope you have `this.getApplication` [docs](http://docs.sencha.com/ext-js/4-1/#!/api/Ext.app.Controller-method-getApplication). – Izhaki Dec 05 '12 at 20:36

score 2 · Accepted Answer · answered Dec 04 '12 at 22:11

My code is very similar to that of Jenson.

// This function loads a controller dynamically and returns its first view
// Note: We don't call onLaunch(this) here. This method might be called during 
// bootstrap (like if there's a cookie with the recent page), after which 
// the application itself will call onLaunch (once out of the Launch method).
// The other issue is that the view is not added when this method is called
// and we might need to reference the view withing onLaunch, so this is the
// wrong place to call on Launch). Currently we're not relying on onLounch 
// with controllers.
dynamicallyLoadController: function( aControllerName )
{
    // See if the controller was already loaded
    var iController = this.controllers.get(aControllerName);

    // If the controller was never loaded before
    if ( !iController )
    {    
        // Dynamically load the controller
        var iController = this.getController(aControllerName);

        // Manually initialise it
        iController.init();
    }

    return iController;
},

loadPage: function( aControllerName )
{
    // save recent page in a controller
    Ext.util.Cookies.set( 'RecentPage', aControllerName );

    var iController   = this.dynamicallyLoadController( aControllerName ),
        iPage         = iController.view,
        iContentPanel = this.getContentPanel(),
        iPageIndex    = Ext.Array.indexOf(iContentPanel.items, iPage);

    // If the page was not added to the panel, add it.
    if ( iPageIndex == -1 )
        iContentPanel.add( iPage );

    // Select the current active page
    iContentPanel.getLayout().setActiveItem( iPage );
},

I've noticed that this solution causes the controllers listeners to be applied every time the view is created. For example, if you create a panel, then remove it (with auto destroy), then create a new panel - all listeners will fire twice. The listeners will keep building up each time you do this. — BigBadOwl, Jun 24 '13 at 14:21
I figured out that the MixedCollection me.controllers never has the new controller added, therefore it will be reinitialising it. — BigBadOwl, Jun 24 '13 at 14:59

Adding controller dynamically into app.js controllers: [] - Ext-JS 4

2 Answers2