In ExtJS, how do I place two fields side by side in a panel with a hbox layout?

Question

In ExtJS, I had some minor problems placing two sets of fields side by side on the hbox layout hbox . The hbox layout seems to be unaware of the height of the set of fields and crop it, even if I explicitly set the height of the panel to something big.

Here's what it looks like:

The blue frame is the hbox, inside which there are 2 sets of fields: "Customer Information" and "Owner Information". The code is (simplified and run in Firebug):

 var clientInfo = { xtype: 'fieldset', defaultType: 'textfield', title: 'Client Info', items: [ { fieldLabel: 'First Name' }, { fieldLabel: 'Last Name' }, { fieldLabel: 'Cell Phone #' }, { fieldLabel: 'Work Phone #' } ] }; var ownerInfo = { xtype: 'fieldset', defaultType: 'textfield', title: 'Owner Info', items: [ { fieldLabel: 'First Name' }, { fieldLabel: 'Last Name' }, { fieldLabel: 'Cell Phone #' }, { fieldLabel: 'Work Phone #' } ] }; new Ext.Panel({ layout: 'hbox', frame: true, height: 400, width: 800, defaults: { flex: 1 }, items: [ clientInfo, ownerInfo ] }).render(document.body); 

PS If you delete defaults: { flex: 1 } , the sets of fields will display correctly, but will not automatically resize to fit the container, which is what I need.

Does anyone know how to fix this rendering problem? Thank you

Answer 1

Try autoHeight: true in your fields.

Another alternative would be column layout, where each column is given 50% of the available width.

Answer 2

Have you tried layoutConfig: {align: 'stretch'} in the panel along with autoHeight: true in your fields?

Works for me on ExtJS 3.1.0

Answer 3

I had a lot of problems with vbox and hbox until I started to explicitly set the three main layoutConfig options:

 layoutConfig: { flex: 1, align: 'stretch', pack: 'start' } 

Because of reading their API, it sounded like specifying the “flex” value in layoutConfig was like the default value, but since setting it up and my layouts worked correctly, I came to the conclusion that this is a required field, against which the children of flex value are in what Something compared with s / s.

This is only an assumption on my part, although - all I really cared about was that using this fixed layout was hehe.

Answer 4

If you want your layout to stretch your need, use the following:

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