Extjs 4 : Adding dynamic fields to form on click of button

Question

I have a form that contains items and button 'add' to add field dynamically to the form (duplicate the 1st field). What function to link to the button to do this Here's my code:

     var form new Ext.form.FormPanel({
            items           : [{
                xtype: 'fieldcontainer',
                combineErrors: true,
                msgTarget : 'side',
                layout: 'hbox',
                items: [{
                    xtype       : 'displayfield',
                    margin      : '0 10 0 0'
                },{
                    xtype       : 'button',
                    text        : 'select'
                }]
            }]
            ,buttons: [{
              text    : 'Add field'
            }]
        })

Answer 1

I think you should define click function on button( or give an itemId to button and define a function in controller, where you can access form object items array and add a dynamic 'fieldcontainer' object to form. Refer below snippet:

In View:

,buttons: [{
          text    : 'Add field',
          itemId : 'addField'
        }

In controller:

refs : [{
    selector : 'viewport form',
    ref : 'myForm'
},
init : function(){
    this.control({
        '#addField':{
            click : this.addFieldContainer
        }
        });

},

addFieldContainer: function(){
var form = this.getMyForm();
form.items.push({
            xtype: 'fieldcontainer',
            combineErrors: true,
            msgTarget : 'side',
            layout: 'hbox',
            items: [{
                xtype       : 'displayfield',
                margin      : '0 10 0 0'
            },{
                xtype       : 'button',
                text        : 'select'
            }]
        });

}

Hope this helps.