1. #1
    Ext User
    Join Date
    Oct 2009
    Posts
    27
    Vote Rating
    0
    jake2891 is on a distinguished road

      0  

    Default add dynamic fields on the fly

    add dynamic fields on the fly


    Im a bit stuck on adding fields dynamically to a formpanel using a href link. Any suggestions on how this is done. here is my code.

    Code:
        var test = new Ext.FormPanel({
            labelWidth: 120, 
            frame:true,
            autoWidth:true,
            items: [{
                xtype:'fieldset',
                title: '',
                autoHeight:true,
                defaults: {width: 110},
                defaultType: 'textfield',
                collapsible:true,
                items :[{
                        fieldLabel: 'Top level menu',
                        name: 'top_menu',
                        allowBlank:false
                    },{
                        fieldLabel: 'Description',
                        name: 'top_description',
                         xtype:'textarea'
                    },{
                fieldLabel: 'Add +',
                xtype:'box',
                autoEl: {
                    tag: 'a',
                    href: 'javascript:test()', // need this to add the two fields again below the current ones onclick 
                    html: 'click me'
                }
    
            }
                ]
            }],
    
            buttons: [{
                text: 'Save',
            handler:function(){
    
            }
            },{
                text: 'Cancel'
            }]
        });

  2. #2
    Sencha User attu's Avatar
    Join Date
    Aug 2008
    Location
    Madrid, Spain
    Posts
    95
    Vote Rating
    0
    attu is on a distinguished road

      0  

    Default


    Hi!
    I think the best way to render components dinamically is adding them into a panel.
    First of all, you have to define a panel without items.
    Code:
    {
        xtype: 'panel',
        id: 'yourID',
        layout: 'form'
    }
    After that,
    Code:
    var aTextField = new .....;
    Ext.getCmp('yourID').add(aTextField);
    Ext.getCmp('yourID').doLayout();
    I hope it helps .

  3. #3
    Ext User
    Join Date
    Oct 2009
    Posts
    27
    Vote Rating
    0
    jake2891 is on a distinguished road

      0  

    Default


    thanks for your reply. I will give that a try and see how it works out.

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,499
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    He already has a Panel!

    Use a Button with a handler.

    Code:
    var test = new Ext.FormPanel({
            labelWidth: 120, 
            frame:true,
            autoWidth:true,
            items: [{
                xtype:'fieldset',
                ref: 'fs',
                title: '',
                autoHeight:true,
                defaults: {width: 110},
                defaultType: 'textfield',
                collapsible:true,
                items :[{
                    fieldLabel: 'Top level menu',
                    name: 'top_menu',
                    allowBlank:false
                },{
                    fieldLabel: 'Description',
                    name: 'top_description',
                     xtype:'textarea'
                },{
                    xtype:'button',
                    text: 'Add field',
                    handler: function() {
                        var p = test.fs.items.items.length - 1;
                        test.fs.insert(p, {
                            xtype: 'textfield',
                            fieldLabel: 'Added field'
                        });
                        test.fs.doLayout();
                    }
                }]
            }],
    
            buttons: [{
                text: 'Save',
                handler:function(){
                }
            },{
                text: 'Cancel'
            }]
        });

  5. #5
    Sencha User attu's Avatar
    Join Date
    Aug 2008
    Location
    Madrid, Spain
    Posts
    95
    Vote Rating
    0
    attu is on a distinguished road

      0  

    Default


    Yes, it's true. That's the better way .

  6. #6
    Ext User
    Join Date
    Oct 2009
    Posts
    27
    Vote Rating
    0
    jake2891 is on a distinguished road

      0  

    Default


    Thanks animal that works well. Would that ref:fs add both the fields instead of just the textfield and not the textarea?

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,499
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Err, what? Plain English please.

  8. #8
    Ext User
    Join Date
    Oct 2009
    Posts
    27
    Vote Rating
    0
    jake2891 is on a distinguished road

      0  

    Default


    that came out wrong. never mind i got it thanks guys for your help.

  9. #9
    Ext User
    Join Date
    Oct 2009
    Posts
    27
    Vote Rating
    0
    jake2891 is on a distinguished road

      0  

    Default


    how would you go about removing the textarea and text fields that have been added. I have added a new button called remove but this seems to remove everyting thats on the form including the remove button itself.

    Code:
    var fsf = new Ext.FormPanel({
            labelWidth: 120, 
            frame:true,
            autoWidth:true,
            items: [{
                xtype:'fieldset',
                ref: 'fs',
                title: '',
                autoHeight:true,
                defaults: {width: 250},
                defaultType: 'textfield',
                collapsible:true,
                items :[{
                    fieldLabel: 'Top level menu',
                    name: 'top_menu',
                    allowBlank:false
                },{
                    fieldLabel: 'Description',
                    name: 'top_description',
                     xtype:'textarea'
                },{
                    xtype:'button',
                    text: 'Add field',
                    handler: function() {
                        var p = fsf.fs.items.items.length - 1;
    
                        fsf.fs.insert(p, {
                            xtype: 'textarea',
                            fieldLabel: '',
                value:'Description goes here'
                        });
                        fsf.fs.insert(p, {
                            xtype: 'textfield',
                            fieldLabel: '',
                value:'Title goes here'
                        });
                        fsf.fs.doLayout();
                    }
                },{
                    xtype:'button',
                    text: 'Remove field',
                    handler: function() {
                        var p = fsf.fs.items.items.length - 1; 
                        fsf.fs.remove(p);
                        fsf.fs.doLayout();
                    }
                }]
            }],
    
            buttons: [{
                text: 'Save',
                handler:function(){
                }
            },{
                text: 'Cancel'
            }]
        });

  10. #10
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,499
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    What do you WANT to remove?

    You are asking it to remove whatever is the last item there.

    Which is the Button. So that's a once-only operation!

Thread Participants: 2

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