CODEWITHSUNDEEP
extjs
GarfieldBesa
GarfieldBesa

Reputation: 45

Sencha ext: How to set Panels width to be auto

I've been trying to fix the width of each panels to be auto, but it doesn't work. then every time I try to remove the width, it doesn't show anything in my output.

here is my code:

items : [{

    region: 'north',

    xtype:'panel',

    header: false,

    layout: 'hbox',

    items: [
    {
        xtype:'contactgrid', //panel alias
        height: 200,
        width:'auto',
        // width: 500,     
        region:'center',

    },
    {
        xtype:'contactdetails', //panel alias
        height:200,
        width:'auto',
        // width: 500,
        region:'east',
    }
    ]
}]

Upvotes: 1

Views: 12241

Answers (2)

Deepak Patil
Deepak Patil

Reputation: 295

Since you have given 'hbox' layout to the parent panel you need to give the flex to each child component. ExtJS will automatically arrange the width of the each panel on the basis of flex.

For example,

items : [{

region: 'north',

xtype:'panel',

header: false,

layout: 'hbox',

items: [
{
    xtype:'contactgrid',//panel alias
    flex: 1
},
{
    xtype:'contactdetails', //panel alias
    flex: 1
}
]
}]

no need to give hardcoded height,width to each panel otherwise it will not resize it on the resize event of parent panel.

As the parent panel layout is 'hbox' no need to give region for the child panel since region is required in 'border' layout and not in 'hbox,vbox' etc.

I hope this can help you out.

Thanks

Upvotes: 1

Rajinder
Rajinder

Reputation: 346

You can set flex for child items. So, in hbox layout, items will get width in proportion to the flex value. Example code from sencha docs:

    Ext.create('Ext.Panel', {
        width: 500,
        height: 300,
        title: "HBoxLayout Panel",
        layout: {
            type: 'hbox',
            align: 'stretch'
        },
        renderTo: document.body,
        items: [{
            xtype: 'panel',
            title: 'Inner Panel One',
            flex: 2
        },{
            xtype: 'panel',
            title: 'Inner Panel Two',
            flex: 1
        },{
            xtype: 'panel',
            title: 'Inner Panel Three',
            flex: 1
        }]
    });

Hope it helps!!

Upvotes: 1

Related Questions