Non application-wide controllers

[Ronaldo]

Hi all,

What's the best way to define a panel specific controller (in my case for a single, complex panel in a wizard)?
Controllers that are defined in the Ext.app.Application definition are initialized at startup and live as long as the application itself.
I'd love to use the control statement to quickly setup handlers instead of decorating a view with listeners,
but when the controller is not instantiated by the Application, there's no reference to the Application and thus not to the EventBus that implements the control statement.

I'd also love to see an example for this situation, as I have the feeling that the existing application/controller examples only apply to more simple applications where all views are visible/used at startup.
IMHO, most situations require more flexibility like instantiating and adding complex panel to a tab (and instantiating a controller for that panel).

So, instead of:


I'd prefer (but won't work as the this is probably not defined during definition):

Ext.define('MyPanel', {
    extend: 'Ext.panel.Panel',
    requires: [
        'Ext.panel.Panel', ....
    ],
   layout: 'fit',
    control({
        'button': {
            click: this.onClickHandler
       }
    }),   
    onClickHandler: function(btn) {
        alert('you clicked me');
    },
    items: [{
        xtype: 'button',
        text: 'Click me',
        listeners: {
            click: function(btn) {
                this.up('panel').onClickHandler
            }
        }
    }]
});

Or automagically instantiate a controller with the proper references if a panel has a property called 'controller' (the code in the initComponent method could be moved to the AbstractComponent's corresponding method).
Of course the controller should be able to find the application and live as long as the panel lives.

Ext.define('MyPanel', {
    extend: 'Ext.panel.Panel',
    requires: [
        'Ext.panel.Panel', ....
    ],
   layout: 'fit',
    controller: 'MyPanelController',
    initComponent: function(cfg) {
        this.callParent(cfg);
        if(this.controller) {
            this.controller = Ext.create(this.controller, this, cfg);
        }
    },
    onClickHandler: function(btn) {
        alert('you clicked me');
    },
    items: [{
        xtype: 'button',
        text: 'Click me'
    }]
});

Any other idea's are more than welcome.

[mitchellsimoens]

Ext JS 4 doesn't have this ability built in. You can bubble up events from children to a parent (at any level). I personally don't see an issue with having all this in a controller (or multiple).

[Ronaldo]

Hi Mitchell,

Thx for your reply. The way of how you spell it out isn't that important.
But it would be great if controllers could be instantiated 'on the fly', apply to a specific panel only, and have the same lifespan as the panel it controls.
Surely there's a way to access the Ext.app.Application or the EventBus during runtime? Aren't they both singletons?

[mitchellsimoens]

Aren't they both singletons?

Neither of them are. There are ways you can hack it up to instantiate controllers on the fly. One thing to note is you loose the ability to do a single build.