CODEWITHSUNDEEP
extjs4
Sergey Stolyarov
Sergey Stolyarov

Reputation: 2657

How to stretch single element in hbox layout?

How to tell extjs4 stretch just one element in hbox layout?

For example I have the following layout:

{
    flex: 1,
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [{
        flex: 1,
        // GRID, needs to be stretched
    }, {
        // button, don't stretch
    }, {
        // another button, don't stretch
    }]
}

In the code above I have all elements (including buttons) are stretched. Is it possible in box layouts?

I can, of course, wrap buttons in the hbox container, but I don't like this solution.

Upvotes: 1

Views: 2658

Answers (2)

vignesh a
vignesh a

Reputation: 1

Single element can be stretched. Sample fiddle explains the stretching of components.

Upvotes: 0

Evan Trimboli
Evan Trimboli

Reputation: 30082

One workaround you could use is to give the buttons a maxHeight, since constrains always "win".

Ext.onReady(function(){
    Ext.create('Ext.panel.Panel', {
        width: 400,
        height: 300,
        renderTo: document.body,
        layout: {
            type: 'hbox',
            align: 'stretch'
        },
        items: [{
            flex: 1,
            title: 'A panel'
        }, {
            xtype: 'button',
            text: 'B1',
            maxHeight: 25
        }, {
            xtype: 'button',
            text: 'B2',
            maxHeight: 25
        }]
    })
});

Upvotes: 1

Related Questions