Dynamic form fields : cloning fields and fieldsets on the fly

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 :

Code:

---

{        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 :

Code:

---

{        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.

Code:

---

        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.

Code:

---

{        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 :

Code:

---

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');

---

Code:

---

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

nice work!!!!!!!

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

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

Code:

---

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

---

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

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

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

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:

Code:

---

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

---

Code:

---

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]}
                        ]

});

---

Code:

---

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?

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

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:

Code:

---

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 :)

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.

Code:

---

{        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 :

Code:

---

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');

---

Code:

---

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

---