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)