Threaded View

  1. #1
    Ext User
    Join Date
    Jul 2007
    Posts
    46
    Vote Rating
    0
    arnold is on a distinguished road

      0  

    Default Dynamic form fields : cloning fields and fieldsets on the fly

    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
    Attached Images
    Attached Files