如何在extjs 3.4中動態添加/刪除複合字段

Question

我正在使用extjs 3.4添加添加此代碼的字段集中的添加/刪除鍵值對，但不能正常工作，它是動態添加字段，但是當我們刪除此瀏覽器給出的死循環錯誤，一段時間後場也給出了以下錯誤：

類型錯誤：this.dom是不確定的 這裏是我的代碼：

//這個js僅用於測試

Ext.onReady(function(){ 

    Ext.QuickTips.init(); 
    function addressCounter(incr) { 
     if (!this.no) { 
      this.no = 0; 
     } else { 
      this.no = this.no + 1; 
     }; 
    }; 
    var counter = new addressCounter(); 
    console.log(counter.no); 
    var roomPanel = new Ext.form.FormPanel({ 
     renderTo:"sid", 
     id: "roomFP", 
     baseCls: 'x-plain', 
     labelWidth: 120, 
     defaultType: 'textfield', 
     monitorValid:true, 
     bodyStyle: ' padding: 15px; background-color: #ffffff' , 
     items:[ 
     { 
      xtype: 'fieldset', 
      title: 'Room Properties', 
      collapsible: true, 
      id:'roompropertiesId', 
      items:[new Ext.Button({ 
       text:'Add Property', 
       handler: function(item){ 
        var fieldset = Ext.getCmp('roompropertiesId'); 
        if(fieldset.items.length >5){ 
         Ext.MessageBox.alert('Add Property','only five fields has been added'); 
         return; 
        } 
        counter.no = counter.no + 1; 
        var a = fieldset.add({ 
         xtype   : 'compositefield' 
         , 
         id    : 'compositefieldId'+counter.no 
         , 
         name    : 'name'+counter.no 
         , 
         height   : 22 
         , 
         autoDestroy : true 
         , 
         items   : [{ 
          name  : 'key'+counter.no 
          , 
          fieldLabel : "Key", 
          id    : 'keyFieldId'+counter.no 
          , 
          xtype  : 'textfield' 
          , 
          width  : 50 
          , 
          height  : 22 
          , 
          allowBlank : true 
         },{ 
          name  : 'value'+counter.no 
          , 
          xtype  : 'textfield', 
          id   : 'valueFieldId'+counter.no 
          , 
          fieldLabel : 'Value' 
          , 
          width  : 50 
          , 
          allowBlank : true 
         },{ 
          xtype : 'displayfield', 
          id:'removeFieldId'+counter.no, 
          html : '<div class="img-delete" onclick="removeFormFields(\''+counter.no+'\');"><a href="#">Remove</a></div>' 
          , 
          height : 16 
         }] 
        }); 
        fieldset.doLayout(); 
        removeFormFields = function(id) { 
         Ext.getCmp('compositefieldId'+id).destroy(); 
        } 
       } 
      })] 
     } 
     ], 
     listeners : { 
      render : function(form){ 
      } 
     }, 
     }); 


}); 

Answer 1

它看起來像是Ext JS中的bug。 當你把普通Container，而不是CompositeField然後它正常工作。 我想到CompositeField子域添加到BasicForm（FormPanel.getForm）CompositeField創建，但不會被刪除。這導致，例如，BasicForm驗證是指被銷燬的字段，並導致錯誤。 海事組織你可以自由地從CompositeField切換到Container。