adding a fieldset to a form container

[bowa]

this is the code i use to get a form across multiple tabs.


var frm = new Ext.form.Form({ labelWidth: 75 });

var frmContainerTabs = frm.container();
frm.end();

var frmTabs = new Array();
frmTabs[0] = frm.container(
{el:Ext.DomHelper.append(Ext.get('form-p'), {tag:'div', style:'padding:20px'})},
new Ext.form.TextField({
fieldLabel: 'First Name',
name: 'first',
width:175,
allowBlank:false
}),
new Ext.form.TextArea({
fieldLabel: 'Address',
name: 'address',
grow: true,
preventScrollbars:true,
value: '4 Redbulls Drive'
})
);

frmTabs[1] = frm.container(
{el:Ext.DomHelper.append(Ext.get('form-p'), {tag:'div', style:'padding:20px'})},
new Ext.form.TextField({
fieldLabel: 'Last Name',
name: 'last',
width:175,
allowBlank:false
})
);

frm.addButton({text: 'Info', handler: function () { alert(frm.getValues(true)) } });
frm.render('form-p');

var tabPanel=new Ext.TabPanel(frmContainerTabs.el);
tabPanel.addTab(frmTabs[0].getEl().id,'Settings');
tabPanel.addTab(frmTabs[1].getEl().id,'Extra settings');
tabPanel.activate(0);

i would like to organize some form elements inside a fieldset element in one of these containers (= tabs)

what would be the approach to that ? i tried to add a fieldset element to the fields list of the container, but that gave errors.

[bowa]

var tab0 = tabPanel.getTab(0).bodyEl;
var fsColor = new Ext.form.FieldSet({legend:'color', hideLabels:true});
fsColor.render(tab0);

var fsColorEl = fsColor.getEl();

new Ext.form.Radio({
boxLabel:Red,
name:'binding',
inputValue: 'red',
checked:true,
width:'auto'
}).render(fsColorEl);

new Ext.form.Blue({
boxLabel:Green,
name:'binding',
inputValue: 'blue',
checked:true,
width:'auto'
}).render(fsColorEl);

new Ext.form.Radio({
boxLabel:Green,
name:'binding',
inputValue: 'green',
checked:true,
width:'auto'
}).render(fsColorEl);


adding this code to the code i posted before creates the fieldsets and the items in there.

the thing i am missing is that the radio buttons and their labels are not wrapped in a div with class 'x-form-item' ... so the styles are not applied.

i guess this normally happens when you call form.fieldset({config},[elements]); in that case the elements get wrapped in a div.

what would be the cleanest way to do this in my example ?

[joaosobrinho]

i tried using your code in an example i have... spliting a form across multiple tabs. but the fields aren't sent in the POST. it goes empty... any suggestion ?

[JasonMichael]

I'm having the same problem.... seems like the getValues method is useless in how you and I are trying to implement it.... a real time waster. I have another solution that works, but its at my home office... ugh