In ExtJS, how do I place two fieldsets side-by-side in a panel with a hbox layout?
- by Daniel T.
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.
