Dynamic form fields : cloning fields and fieldsets on the fly

[arnold]

Ever wanted a form to be a bit more dynamic.
Like being able to add a field or fieldset more than once.
This is how you do it :

All type of fields are supported :

{	fieldLabel: 'First Name',
	name: 'first',
	labelSeparator  : '',
	width: 230,
	allowBlank:false,
	dynamic:true,
	maxOccurs:5,
	listeners : { 'maxoccurs' : {fn: function(field) { Ext.example.msg('maxoccurs', 'Implement behaviour'); }}}
}

fieldsets are supported :

{	xtype : 'fieldset',
	dynamic : true,
	maxOccurs:5,
	listeners : { 'maxoccurs' : {fn: function(field) {Ext.example.msg('maxoccurs', 'Implement behaviour');},
	items :... 
	..
}

Even nested fields of fieldsets are supported!
Note the current amount of clones can also be set programmatically.
This will add/remove clones untill the specified amount is reached.

	fieldSet.clones(2);
	person.getForm().findField('state').clones(1);
	person.doLayout();

Additional features :
Especially for large and dynamic forms the property nameSpace is introduced.
The property nameSpace set on a field or fieldset will bound the component to a named collection
and therefore allow a more fine grained control.

{	fieldLabel: 'First Name',
	name: 'first',
	nameSpace:'person'
	labelSeparator  : '',
	width: 230,
	allowBlank:false,
	dynamic:true,
	maxOccurs:5,
	listeners : { 'maxoccurs' : {fn: function(field) { Ext.example.msg('maxoccurs', 'Implement behaviour'); }}}
}

This will allow you to populate and extract values of fields, fieldsets, dynamic fields and dynamic fieldsets of a given nameSpace :

person.populate(Ext.decode('{"state":["Netherlands","Delaware"]}'),'location','field');
person.populate(Ext.decode('[{"first":["Adriaan","Cornelis"],"last":"Zaanen"},{"first":["Bill"],"last":"Joy"}]'),'person','fieldset');
person.populate(Ext.decode('{"birthDate":"03/12/2009"}'),'person','field');

var location = person.extract('location','field');
var fsperson = person.extract('person','fieldset');
var fperson = person.extract('person','field');

To get this up and running just unzip the attached demo in your examples folder of extjs.
And that's it. See the attached image for a sneak preview of the attached demo.
Have fun!

14032009 : initial, introduced dynamic field by overriding Ext.form.Field
15032009 : introduced dynamic fieldset by overriding Ext.form.FieldSet
16032009 : allowed programmer to set amount of field and fieldset clones
20032009 : introduced namespaces
20032009 : introduced extracting and populating of namespaced fields and fieldsets
22032009 : documented features
23032009 : allowed programmer to retrieve current set of clones of a given field or fieldset

[Frenky]

nice work!!!!!!!

[dizor]

How i can add a fieldset more than once on load form?

[arnold]

Thanks for your feedback. Both fields and fieldsets can be cloned.
You can set the current amount of clones by :

	fieldSet.clones(2);
	person.getForm().findField('state').clones(1);
	person.doLayout();

Download the attached demo to acquire the latest version of the code.

[dizor]

Thanx for plugin. I have problem with cloning FormPanel - i think that in your example it does not work.

[arnold]

cloning fields and fieldsets are supported and tested on both IE and FF
cloning a panel is not supported

[dizor]

Thx for fast reply. My bad ... but i have another problem. In your example tabs don't render on start (in my ext) - i must resize browser window, and than it's ok. Now, I change your tabs to:

...
fieldLabel: 'First Name',
name: 'resource/first',
id:'test'
...

var tabs = new Ext.TabPanel({
	width:450,		
	activeTab: 0,		
	deferredRender:false,						
	layoutOnTabChange:true,
	defaults:{autoHeight:true,hideMode:'offsets'},		
	items: [
			{title:'Person',id: 'person' ,items: [person]},
			{title:'Company',id: 'company' ,items: [company]}
			]

});

Ext.getCmp("test").clones(4);
Ext.getCmp("test").doLayout();

but the problem still exists - i must resize window and than cloning is ok. Any ideas?

[dizor]

Ok - i found solution. Do layout must be done of course on tabs.

[dizor]

Last req: a use your plugin on form with a lot of fields - now i haven't any idea how i can auto cloning and load variables with:

Ext.getCmp('mainForm').getForm().load({url:'form/get_customers',params:{id:id}});

Please, help me with this. I think that this possibility will be best for this plugin and make me (and people) happy

[arnold]

Especially for large and dynamic forms the property nameSpace is introduced.
The property nameSpace set on a field or fieldset will bound the component to a named collection,
as part of the total set of fields and fieldsets of the form, and therefore introduce a more fine grained control.

{	fieldLabel: 'First Name',
	name: 'first',
	nameSpace:'person'
	labelSeparator  : '',
	width: 230,
	allowBlank:false,
	dynamic:true,
	maxOccurs:5,
	listeners : { 'maxoccurs' : {fn: function(field) { Ext.example.msg('maxoccurs', 'Implement behaviour'); }}}
}

This will allow you to populate and extract values of fields, fieldsets, dynamic fields and dynamic fieldsets of a given nameSpace :

person.populate(Ext.decode('{"state":["Netherlands","Delaware"]}'),'location','field');
person.populate(Ext.decode('[{"first":["Adriaan","Cornelis"],"last":"Zaanen"},{"first":["Bill"],"last":"Joy"}]'),'person','fieldset');
person.populate(Ext.decode('{"birthDate":"03/12/2009"}'),'person','field');

var location = person.extract('location','field');
var fsperson = person.extract('person','fieldset');
var fperson = person.extract('person','field');