如何在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。