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,503
    Vote Rating
    48
    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,503
    Vote Rating
    48
    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,503
    Vote Rating
    48
    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