[2.2] Dynamically adding/cloning/removing fields of a form

[arnold]

Ever faced the problem of how to dynamically add/clone/remove fields of a form?
A small extension and plugin were created to resolve this issue.
Just add the configuration option dynamic : true to your field and the plugin Ext.ux.plugins.DynamicPanel
to your panel and your done.



new Ext.FormPanel({
labelWidth: 75,
width: 450,
defaults: {width: 230},
title :'Simple Form',
frame:true,
renderTo : document.body,
defaultType: 'textfield',
plugins:[Ext.ux.plugins.DynamicPanel],
items: [{ fieldLabel: 'First Name',
name: 'first',
dynamic:true,
maxOccurs:2 // amount of occurences of first name allowed
},.....
{ fieldLabel: 'Birth date',
name: 'birthDate',
allowBlank:false,
xtype:'datefield',
dynamic:true
}],
buttons: [{text: 'Save'},{text: 'Cancel'}]
});



An example of how to dynamically add/clone/remove fields of a form is attached to this post. The example uses one of the standard form examples that's already part of the Extjs distribution.

Just unzip the attached file into the examples directory and you should be able to start using it.
The code is tested in both FF & IE

[Bodom78]

Thanks arnold,

Was looking on how to achieve this, the supplied example is much appreciated.

[arnold]

Thanks for your positive feedback!
In the meanwhile I've extended this example a bit and posted
the latest version as an extension/plugin. (http://extjs.com/forum/showthread.php?t=52092) The extension/plugin contains a bit more functionality.