Extjs can't dynamically add/remove fields in formpanel

Question

I have a form panel that uses a table layout to display a form. I need to add in functionality to add /remove a set of components.

The add button should add a new row of components underneath the existing elements & the remove button should remove that last added row.

The formpanel can add a new field but it's appearing below the buttons and the form is not increasing in width (see screen shot below). I've tried this with both the insert and add function but both have the same effect.

Does anyone know how: 1) I can add a series of components in the next row? 2) How I can remove the next row.

Partial formPanel code & button code:

![SearchForm = Ext.extend(Ext.FormPanel, {
     id: 'myForm'
     ,title: 'Search Form'
     ,frame:true     
     ,waitMessage: 'Please wait.'
     //,labelWidth:80    
     ,initComponent: function() {    
         var config = {                 
            items: [{
                layout:{
                    type:'table',
                    columns:5
                },
                buttonAlign:'center',

                defaults:{
                    //width:150,
                    //bodyStyle:'padding:100px'
                    style:'margin-left:20px;'
                },               
                items:[//row 1
                       {                    
                            xtype: 'label',
                            name: 'dateLabel',
                            cls: 'f',
                            text: "Required:"                   
                        },
                        {
                            xtype: 'container',
                            layout: 'form',
                            items: {
                                xtype: 'datefield',
                                fieldLabel: "From Date",  
                                 value: yesterday,
                                width: 110,
                                id: 'date1'                                                   
                            }
                        }][1]
buttons: [{
                            text: 'Add More Criteria (max 10 items)',
                            id: "addBtn",                   
                            scope: this,
                            handler: function(){
                                alert('hi');
                                /*this.items.add({
                                     xtype : 'textfield',
                                     fieldLabel : 'Extra Field',
                                     name : 'yourName',
                                     id : 'yourName'
                                 }); */
                                this.insert(4,{
                                        xtype: 'textfield',
                                        id: 'input20',
                                        //hideLabel: true,
                                        width: 180,
                                        fieldLabel: 'hi'
                                    });
                                this.doLayout();
                            }
                }

Answer 1

Easiest way would be to have a fieldset in the form to hold all the 'rows' and then add a row to this fieldset using fielset.add()

(Your 'row' can be another fieldset that has all the fields)

Answer 2

Dynamic form fields generation seems to be obvious and there are lots of examples and some blogs for mootools etc but in extjs world i couldn`t find a working example(probably because most people use powerful Extjs grid).I had to invent one by myself for MedAlyser project! and im sharing it with you.she might have bugs and/or be incomplete but i hope she helps a bit.

function addressCounter(incr) {
    if (!this.no) {
        this.no = 0;
    } else {
        this.no = this.no + 1;
    };
};
var counter = new addressCounter();
console.log(counter.no);
//put below code inside your form  items       
{
    xtype: 'button',
    text: 'Add address ',
    id: 'addaddress',
    handler: function () {
        counter.no = counter.no + 1;
        console.log(counter.no);
        Ext.getCmp('patientaddress').add([{
            xtype: 'combo',
            store: 'AddressType',
            displayField: 'name',
            valueField: 'name',
            fieldLabel: 'Address Type',
            id: 'addresstype' + counter.no,
            name: "Patientaddress[addresstype][]",
            value: 'Home'
        }, {
            fieldLabel: 'zip',
            width: 160,
            maxLength: 10,
            enforceMaxLength: true,
            maskRe: /[\d\-]/,
            regex: /^\d{5}(\-\d{4})?$/,
            regexText: 'Must be in the format xxxxx or xxxxx-xxxx',
            name: "Patientaddress[zip][]",
            id: 'zip' + counter.no
        }, {
            fieldLabel: 'Address 1',
            name: "Patientaddress[address1][]",
            id: 'address1' + counter.no
        }, {
            fieldLabel: 'Address 2',
            name: "Patientaddress[address2][]",
            id: 'address2' + counter.no
        }, {
            fieldLabel: 'City',
            name: "Patientaddress[city][]",
            id: 'city' + counter.no
        }, {
            fieldLabel: 'State',
            name: "Patientaddress[state][]",
            id: 'state' + counter.no
        }, {
            xtype: 'combo',
            store: Ext.create('MA.store.Countries'),
            displayField: 'name',
            valueField: 'id',
            forceSelection: true,
            fieldLabel: 'Country',
            typeAhead: true,
            queryMode: 'local',
            name: "Patientaddress[country][]",
            id: 'country' + counter.no
        } // eof
        // countries;
        ,
        Ext.getCmp('addaddress'), {
            xtype: 'button',
            text: 'Remove address',
            id: 'removeaddress' + counter.no,
            handler: function (
            thisButton, eventObject) {

                activeRemoveButtonId = thisButton.getId().split('removeaddress')[1];

                console.log('activeRemoveButtonID:' + activeRemoveButtonId);
                Ext.getCmp('patientaddress').remove('address1' + activeRemoveButtonId);
                Ext.getCmp('patientaddress').remove('address2' + activeRemoveButtonId);
                Ext.getCmp('patientaddress').remove('city' + activeRemoveButtonId);
                Ext.getCmp('patientaddress').remove('state' + activeRemoveButtonId);
                Ext.getCmp('patientaddress').remove('country' + activeRemoveButtonId);
                Ext.getCmp('patientaddress').remove('removeaddress' + activeRemoveButtonId);
                Ext.getCmp('patientaddress').remove('addresstype' + activeRemoveButtonId);
                Ext.getCmp('patientaddress').remove('zip' + activeRemoveButtonId);

                Ext.getCmp('patientaddress').doLayout();
            }
        }]);
        Ext.getCmp('patientaddress').doLayout();

    } // eof function
}, // eof Add button

Removing fields was more complicated because the remove button needs to know exactly which field has to be removed. This code creates new fields and removes them correctly as you asked for.Any suggestions are welcome.