Extjs无法动态添加/删除窗体中的字段

Question

我有一个使用表格布局来显示窗体的窗体面板。我需要添加功能来添加/删除一组组件。

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

formpanel可以添加一个新的字段，但它出现在按钮下面，并且窗体宽度不增加（请参见下面的屏幕截图）。我已经试过这与插入和添加功能，但都具有相同的效果。

有谁知道如何： 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(); 
          } 
       } 

Answer 1

最简单的方法是在形式fieldset来保存所有“行”，然后使用添加一行到这个fieldsetfielset.add()

（您的'行'可以是具有所有字段的另一个字段集）

Answer 2

动态表单字段的一代似乎是显而易见的，有很多的例子和一些博客mootools等，但在extjs世界我无法找到一个工作的例子（可能是因为大多数人使用强大的Extjs网格）。我不得不发明一个由我自己为MedAlyser项目！并且即时与你分享。她可能有错误和/或不完整，但我希望她能帮助一下。

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 

删除字段更复杂，因为删除按钮需要确切地知道哪个字段必须删除。此代码会创建新字段并按照您的要求正确删除它们。欢迎任何建议。