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

  2. #2
    Ext User
    Join Date
    Oct 2008
    Posts
    11
    Vote Rating
    0
    Frenky is on a distinguished road

      0  

    Default


    nice work!!!!!!!

  3. #3
    Sencha User
    Join Date
    Nov 2008
    Posts
    159
    Vote Rating
    0
    dizor is on a distinguished road

      0  

    Default


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

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

      0  

    Default


    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.

  5. #5
    Sencha User
    Join Date
    Nov 2008
    Posts
    159
    Vote Rating
    0
    dizor is on a distinguished road

      0  

    Default


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

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

      0  

    Default


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

  7. #7
    Sencha User
    Join Date
    Nov 2008
    Posts
    159
    Vote Rating
    0
    dizor is on a distinguished road

      0  

    Default


    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?

  8. #8
    Sencha User
    Join Date
    Nov 2008
    Posts
    159
    Vote Rating
    0
    dizor is on a distinguished road

      0  

    Default


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

  9. #9
    Sencha User
    Join Date
    Nov 2008
    Posts
    159
    Vote Rating
    0
    dizor is on a distinguished road

      0  

    Default


    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

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

      0  

    Default


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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi