表单 – Extjs无法动态添加/删除formpanel中的字段

添加按钮应在现有元素下添加一行新组件.删除按钮应删除最后添加的行.

formpanel可以添加一个新字段,但它出现在按钮下方,并且表单的宽度没有增加(参见下面的屏幕截图).我已尝试使用insert和add函数,但两者都具有相同的效果.

有谁知道如何：
1)我可以在下一行添加一系列组件吗？
2)我如何删除下一行.

部分formPanel代码&按钮代码：

![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();
                            }
                }