extjs align components in hbox and vbox

Question

I am using the vbox layout.

I would like to make my components 'fill out' to the sides when I add them. I use the 'align' attribute with the value 'stretch' :

                    layout: {
                        type: 'vbox',
                        align: 'stretch'
                    },

..which works fine, but I would like this align/stretch behaviour to happen on just certain components. For example in the diagram below :

enter image description here

I would like to stretch out the text field, but have the button normal size.

Is this possible with vbox or hbox?

Saki Saki · Accepted Answer · 2014-09-17T14:14:32

Unfortunately not. Nevertheless, seeing the picture you posted it seems to me that vbox is not the layout you want. VBox is good where you want to change items sizes vertically with their container or keep their ratio.

The above is good candidate for anchor layout (form's default) where you can set anchor individually on items. In this case you would set anchor:100% on the text field but not on button.

extjs align components in hbox and vbox

1 Answers