Hybrid 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

  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
    Ext User
    Join Date
    Apr 2008
    Posts
    3
    Vote Rating
    0
    robert7 is on a distinguished road

      0  

    Default


    Hello Arnold!
    your extension is really great! It is almost exactly what I was searching for (and could not easily figure out how to do it). So you helped me very much.

    I have a few suggestions for future development:

    1, extract() works for standalone checkboxes and radio buttons, but only gets values true/false. Example: I have 3 radios named "fldA" and the third one is checked: extract() will return: {fldA:[false,false,true]}. Config option "inputValue" of the radios is not taken into account. (Compared to Ext.form.BasicForm.getValues(), which will for 3 radios return one string value specified by "inputValue" of the checked radio field.)

    2, radios wrapped in Ext.form.RadioGroup are not be included in extract(). Same for CheckBoxGroup. Although I don't need "dynamic" checkboxes/radios it would be nice if extract/populate could support them.

    3, horizontal alignment of the plus/minus icons doesn't work for TriggerField (requires just include of 'trigger' xtype in alignIcon())

    4, populate() now requires that even the fields with blank values to be specified in the first parameter (or unlisted fields are not reset to blank values). It may be better if the loop in populate would be over all fields found in specified namespace. Example: form contais 4 fields in namespace XY, incoming parameter for populate specifies only 2 of them, populate should setup 2 listed fields and clear the 2 remaining fields.

    5, it would be more intuitive for the user, if the plus icon were present always on the last clone of the specified field.
    Example: master field is created with "+" icon. After the 1 clone is created, the icon for the first field changes to "-",
    a "+" icon moves to the clone. That means always the last field (master or the last clone has "+") and all previous have "-" icons. But I understand, that it would be more difficult to code.

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

      0  

    Default


    Thanks for your extensive and indepth feedback!
    Your absolutely right on the radio buttons and checkboxes. I will look into this
    and include it in the next release. About remark 5. That's doable.

    Just let me know when you have already implemented some of these features.
    When your interested I will merge our implementations and make this a joined effort.

  10. #10
    Sencha User
    Join Date
    Aug 2007
    Posts
    52
    Vote Rating
    0
    jamie.nicholson is on a distinguished road

      0  

    Default FieldSet modified to be similar to gmail Contacts

    FieldSet modified to be similar to gmail Contacts


    Great plugin, didn't quite do what I wanted so I've changed it somewhat.
    Perhaps my changes can be integrated to compliment what you've done with the fieldsets rather than replace it. But I replaced it for now as it was easier to get my head around how it all worked.

    My changes have altered the way the fieldset cloning works, in short the fieldset + tool doesn't clone a fieldset. Instead it clones a row of column, form, fields within a fieldset. Very similar behavior to gmail 'Contacts' edit form.

    Changes have been made to field.js to allow multiple columns within a fieldset

    fieldsets are still configured as dynamic, however they have layout:'column'

    Code:
             dynamic : true,
             maxOccurs:5,
             xtype : 'fieldset',
             layout:'column',
    	 nameSpace:'person',
             autoHeight:true,
    	 width: 600,
    	 listeners : { 'maxoccurs' : {fn: function(fieldset) {
    	       Ext.example.msg('maxoccurs', 'Implement behaviour of maxoccurs');
    	 }}},
    Because you can't define a form element in a column you need to have a nested form with you're desired columnWidth, each form should contain only one field, notice dynamic is no configured
    Code:
    	 items :[{
    				layout:'form',
    				columnWidth:.5,
    				defaultType: 'textfield',
    				items:[{
    					fieldLabel: 'First Name',
    					name: 'first',
    					//dynamic:true,
    				}]
    			},{
    				layout:'form',
    				columnWidth:.5,
    				defaultType: 'textfield',
    				items:[{
    					fieldLabel: 'Last Name',
    					name: 'last',
    				}]
    			}]
    That aside I'll e-mail the other changes to arnold in the Ext.form.FormPanel and Ext.form.FieldSet.
    More updates to come possibly, need to discuss with arnold.

    26-Jun-2009 - updated FormPanel extract so fieldset extract returns array(rows) of objects(fields)
    Attached Images
    Attached Files
    Last edited by jamie.nicholson; 25 Jun 2009 at 1:15 PM. Reason: Updated dynform.zip

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