add dynamic fields on the fly

[jake2891]

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.

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

[attu]

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.

{
    xtype: 'panel',
    id: 'yourID',
    layout: 'form'
}

After that,

var aTextField = new .....;
Ext.getCmp('yourID').add(aTextField);
Ext.getCmp('yourID').doLayout();

I hope it helps .

[jake2891]

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

[Animal]

He already has a Panel!

Use a Button with a handler.

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

[attu]

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

[jake2891]

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

[Animal]

Err, what? Plain English please.

[jake2891]

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

[jake2891]

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.

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

[Animal]

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!