CODEWITHSUNDEEP
extjsextjs5
Pramveer Rothan
Pramveer Rothan

Reputation: 37

How to set columWidth config at runtime in ExtJs columnLayout?

I have a panel with some items in it, it's initial layout is column and each item have columnWidth: 1 but now on a button click event I want to set columnWidth of each item to 0.5. which should be 50% of the container.

I have tried:

{
    xtype: 'panel',
    fieldLabel: 'Name',
    vertical: true,
    layout: 'column',
    items: [
        {
        xtype: 'button', 
        id:'btn1', 
        width: 80,
        text: 'Button1', 
        columnWidth:1
        },{
        xtype: 'button', 
        id:'btn2', 
        width: 80, 
        text: 'Button2', 
        columnWidth:.2
        }
    ]
}

button click code:

Ext.getCmp('btn2').setConfig({columnWidth: '1'});

but this is not working please help me.

Upvotes: 0

Views: 120

Answers (1)

Greendrake
Greendrake

Reputation: 3734

First of all, you can't have columnWidth: 1. From documentation:

The columnWidth property is always evaluated as a percentage and must be a decimal value greater than 0 and less than 1 (e.g., .25).

To update your columnWidthdynamically, set its value on the item directly and then update the whole layout:

handler: function() {
    Ext.getCmp('btn2').columnWidth = 0.5;
    Ext.getCmp('panel').updateLayout();
}

Full example: https://fiddle.sencha.com/#fiddle/pjm

Upvotes: 0

Related Questions