Question

我正在使用extjs 3.4添加添加此代码用于在字段集中添加/删除键值对但是工作不正常它是动态添加字段但是当我们删除此浏览器时给出无限循环错误并且在一段时间之后字段是还给出了以下错误：

TypeError：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中的错误。如果您使用普通Container代替CompositeField，那么它可以正常运行。我发现CompositeField子字段已添加到BasicForm FormPanel.getForm创建CompositeField上，但未删除。这导致，例如，BasicForm验证引用被破坏的字段，并导致错误。 IMO您可以自由地从CompositeField切换到Container。

如何动态地在extjs 3.4中添加/删除复合字段

1 个答案: