Forms with Nested FieldSets ??

[ngrover]

I've looked around and still can't find a way to have nested FieldSets within and Ext Form. The basic idea (or how I thought it should work) is like the following:

// create a form
var someForm = new Ext.form.Form({
.... form config
});

// setup form fieldset
someForm.fieldset({
legend:'some legend'
});

// add form elements to the form
someForm.add(
new Ext.form.Checkbox(...);
);

// create another FieldSet
var innerFieldSet innerFS = new Ext.form.FieldSet({
legend:'inner legend'
});

// ADD SOME FORM ELEMENTS TO INNER FIELDSET ???

someForm.add(innerFieldSet);

someForm.render('form_dom_id');




...... I've tried variations of things but no go. What is the right way to do this?

Edit: perhaps I should be more detailed. so far in EXT i can create one form per fieldset... this seems the natural way to do things in EXT

<form>
<fieldset>
inputs
</fieldset>
</form>

what i want to construct is a structure like this:

<form>
<fieldset>
inputs
<filedset>
more inputs
</fileset>
<filedset>
more inputs
</fieldset>
</fieldset>
</form>

[ngrover]

I think I've figured out how to accomplish nested fieldsets within a single form. Basically you just create an Ext.form.Form and then you can add other nested Ext.form.Form Elements to the container form and when it renders you will only get one pair of html <form> tags.




var outterForm = new Ext.form.Form({
labelAlign: 'right',
labelWidth: 125,
buttonAlign: 'right'
});
outterForm.fieldset(
{legend:'Report Options'}
);


var innerForm = new Ext.form.Form({
labelAlign: 'right',
labelWidth: 125,
buttonAlign: 'right'
});
innerForm.fieldset(
{legend:'Sub Report Options'}
);

outterForm.add(innerForm);

[tryanDLS]

What happens when you submit that form - do you get all the fields or only the outer form's fields?

[ngrover]

Everything seems to work both in terms of html rendering and Ext's form functionality (all values submitted). End result attached as image.

[ngrover]

I spoke too soon. IE6 throws an error. "Invalid source HTML for this operation". Have to keep fiddling around I guess.

I suspect IE is nesting form elements and therefore throws the error while FireFox is smart enough not to render nested form tags and therefore it works... not sure but thats my guess.

If anyone can tell me how to construct a single form using EXT that resembles the attached image from the post above... that would be awesome.

[ngrover]

OK.. I'm a dweeb. I've figured it out and now I'm starting to see the EXT matrix ;)

I now realize that you can call the function "fieldset" multiple times on a single Ext.form.Form object and depending on where you call the "end" function your fieldsets will be nested.

I've single handedly confused myself.. fooled myself.. and then figured out an answer to my own question.