Extjs conditional configuration of initComponent

Question

I'm quite new to Extjs and I can't figure this out: I have a Container that requires a panel. Is there a way to dynamically initialise a component? This is my view:

Ext.define('Hello.view.index.Resume', {
    extend: 'Ext.container.Container',

    requires: [
        'Hello.view.index.ValuesChart',
    ],

    initComponent: function() {
        this.leftZone = [{
            margin: '0 0 5 0',
            ui: 'hello-toggable',
            xtype: 'hello_index_characteristics'
        }];

        Ext.apply(this, {
            items: [{
                xtype: 'container',
                items: [{
                    xtype: 'hello_index_valueschart',
                }, { 
                    // ....
                }]
            }]
        });
        this.callParent();
    }
});

The hello_index_valueschart panel has an initComponent function that defines several items:

initComponent: function() {
    Ext.apply(this, {
        border:false,
        dockedItems: [{
            xtype: 'toolbar',
            dock: 'bottom',
            items: [
                {
                    xtype: 'tbspacer',
                    width: 15
                },
                '->',
                {
                    xtype:'button',
                    customproperty: this.id,
                    text:'I am a text',
                    tooltip: 'Hi there'
                },
                {
                    xtype:'button',
                    customproperty: this.id,
                    text:'I am another text',
                    tooltip: 'Hi here'
                }
            ]
        }]
    })
}

Is there a way to dynamically pass the items to this panel? I mean for example: if a condition is verified in the controller pass an array items1 otherwise pass array items2.

Kyle Fransham Kyle Fransham · Accepted Answer · 2014-05-27T15:17:13

A quick thought:

you can use the afterrender event on the panel, then add the components based on a condition in the controller. Something like:

Ext.define('MyApp.controller.MyController', {
    extend: 'Ext.app.Controller',

    onPanelAfterRender: function(component, eOpts) {
         if(this.someCondition()) {
            component.add( { ... });
         }
    },

    someCondition: function() {
        return true;
    }

    init: function(application) {
        this.control({
            "#mypanel": {
                afterrender: this.onPanelAfterRender
            }
        });
    }

});

Extjs conditional configuration of initComponent

1 Answers