I have a form with dynamically added fields (varying sizes). I would like to put a number of form fields in a fieldset, and have the fieldset border just large enough to contain all the fields.
Here is an (ugly) example that shows the issue:
var win = new Ext.Window({
xtype: 'form',
layout: 'form',
height: 200,
width: 500,
title: 'Testing',
items: [{
xtype: 'fieldset',
layout: 'hbox',
autoHeight:true,
autoWidth: false,
title: 'Fieldset',
defaults: {
border: false,
layout: 'form',
labelAlign: 'top',
labelSeparator: ''
},
items: [{
items: new Ext.form.TextField({
fieldLabel: 'Col1',
name: 'col1',
value: 'nothing',
})
}, {
items: new Ext.form.TextField({
fieldLabel: 'Col2',
name: 'col2',
value: 'something'
})
}]
},
new Ext.form.TextField({
fieldLabel: 'Col3',
name: 'col3',
value: 'anything'
})
]
}).show();
This is what it looks like:
I will not know the width of the contained fields beforehand, so I can't specify a width.
Thanks for any suggestions.
Ok, works by changing some fieldset properties:
layout to 'table',
autoWidth to true,
adding a cls with 'float:left', (putting this in style doesn't seem to help)
and adding a dummy element to clear the float:
{
xtype: 'component',
style: 'clear:both'
}
It now shows as desired!