CODEWITHSUNDEEP
extjs
zuriosam
zuriosam

Reputation: 115

How to implement IF statement in Ext.define

I have defined my panel class and I would like to customize it according to specific conditions, as for example in the following pseudo code:

if (foo =='A') {
   //Draw only button1
}
else {
   //Draw button1 & button2
}

However, I don't know how to include this if statement in MyPanel class.

Ext.define('MyApp.view.Main', {
    extend : 'Ext.panel.Panel',
    xtype  : 'main',
    width: 500,
    height: 400,

    items:[{
        xtype: 'mypanel',
        html: 'This is panel1',
        foo: 'A',
    },{
        xtype: 'mypanel',
        html: 'This is panel2',
        foo: 'B',
    }]
});

Ext.define('MyApp.view.MyPanel', {
    extend : 'Ext.panel.Panel',
    xtype  : 'mypanel',

    initComponent: function () {
        foo = this.foo;
        this.callParent(arguments);
    },

    header: {
        items: [{
            xtype: 'button',
            text:  'button1',
        },{
            xtype: 'button',
            text:  'button2',
        }]
    },

    width: 500,
    height: 200,
});

I've prepared a Fiddle example

Thank you in advance.

Upvotes: 0

Views: 276

Answers (1)

Arthur Rubens
Arthur Rubens

Reputation: 4706

Just set the header property in the 'initComponent' method or use special method which will return 'header' config object depends on conditions.

Ext.define('MyApp.view.MyPanel', {
    extend: 'Ext.panel.Panel',
    xtype: 'mypanel',

    initComponent: function () {
        foo = this.foo;
        this.header = {
            items: [{
                xtype: 'button',
                text: 'button1'
            }, {
                xtype: 'button',
                text: 'button2',
                hidden: (foo === 'A'),
            }]
        };
        this.callParent(arguments);
    },
    width: 500,
    height: 200,
});

With special method:

Ext.define('MyApp.view.MyPanel', {
    extend: 'Ext.panel.Panel',
    xtype: 'mypanel',

    initComponent: function () {
        this.header = this.getMyCustomHeader();
        this.callParent(arguments);
    },
    
    getMyCustomHeader: function () {
        var customHeader = {
            items: [{
                xtype: 'button',
                text: 'button1'
            }, {
                xtype: 'button',
                text: 'button2'
            }]
        }
        if (this.foo === 'A') {
            customHeader = {
                items: [{
                    xtype: 'button',
                    text: 'button1'
                }]
            }
        }
        return customHeader;
    },
    width: 500,
    height: 200
});

Upvotes: 1

Related Questions