View Full Version : Adding variable fieldsets to a form panel dynamically?? Possible?

10 Mar 2011, 3:09 PM
Hi all,

Can I dynamically add fieldsets to a form? Basically what I want to do is start populating the form with fieldsets once the user has selected an item. For example if I had the choices of holidays I would populate the form with a few recipes (each is a fieldset and each holiday has different number of recipes). These recipes are stored in a db so I can add/modify later and it makes the platform dynamic.. if this is possible.

I figure I can do something similar to:

test = new Ext.FormPanel({
frame: true,
title: 'testAdding',
width: '400px',

Which is an item in my main FormPanel, then I'd like to add the fieldsets depending on the selection. My on select listener will call a function where I want to know if I can format a string and add it on the fly?

// assume i've already queried
var t = Ext.getCmp('testAdding');
var testing = "{xtype: 'fieldset', title: 'Turkey Soup', collapsible: true, items :[{fieldLabel: 'X',name: 'x', value: 'xyz";
t.add(testing); // will this add testing as an item to panel testAdding?
this.doLayout(); // maybe need to call this also?


11 Mar 2011, 4:16 PM
This works:
test = new Ext.FormPanel({
frame : true,
title : 'testAdding',
width : 400,
height : 200,
items : [],
renderTo: Ext.getBody()

var testing = {
xtype : 'fieldset',
title : 'Turkey Soup',
collapsible : true,
defaults : {xtype: 'textfield'}, // the default type of the field
items : [{
fieldLabel : 'X',
name : 'x',
value : 'xyz'
fieldLabel : 'y',
name : 'y',
value : 'abc'

test.doLayout(); // you have to call doLayout()

It is strongly advised you install Firebug (http://getfirebug.com/).

14 Mar 2011, 7:14 AM
Ok I thought it would but slowly starting to get the ball rolling. Thanks walldorff. I installed firebug and so far it's been incredible.

14 Mar 2011, 7:39 AM
Can't live without Firebug :)
And while you're at it, have a look at these tools:

14 Mar 2011, 10:56 AM
Question on the code, why does it work without the quotes like I had in my snippet? I see now that in the API it has it without quotes...

So if I returned to a function with a list of recipes (a class) can I use something like

// i'm looping through my recipes
var testing = {
xtype: 'fieldset',
title: list[i].recipeName,
items: [{ fieldLabel: 'ingredients', fieldValue: list[i].ingredients, ..... }]
}; // variable testing
} // loop

14 Mar 2011, 1:48 PM
fieldValue doesn't exist :)
It's either
value: 'the value'or
field.setValue('the value');
Check the docs on form->Field.

15 Mar 2011, 6:11 AM
It doesn't exist? I got it from the sample forms http://dev.sencha.com/deploy/dev/examples/form/dynamic.html

Either way thanks, its been a huge help.

21 Aug 2012, 10:27 PM
Is it possible to add a item at specific position in the form?