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

Question

In ExtJS, I'm having a little trouble placing two fieldsets side-by-side in a panel with a hbox layout. The hbox layout seems to be unaware of the fieldset's height, and cuts it off, even if I explicitly set the panel's height to something large.

Here's what it looks like:

The blue border is the hbox panel, and there's 2 fieldsets inside, 'Client Info' and 'Owner Info'. The code is like so (simplified and runnable 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);

P.S. If you remove defaults: { flex: 1 }, the fieldsets render correctly, but doesn't automatically resize to fit the container, which is something I need.

Does anybody know how to fix this rendering issue? Thanks.

Answer 1

Try autoHeight: true in your fieldsets.

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

Answer 2

Have you tried layoutConfig:{align:'stretch'} on the panel, together with autoHeight: true in your fieldsets ?

Works for me on ExtJS 3.1.0

Answer 3

I had a lot of issues with vbox and hbox until I started explicitly setting the three main layoutConfig options:

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

From reading their API, it sounded like specifying a 'flex' value in the layoutConfig was akin to a default, but since setting it and my layouts work correctly I've come to believe that it is a required field against which children's flex values are, at some point, compared to/ with.

That's just speculation on my part though - all I really cared about was that using that fixed my layout heh.