how to add/remove composite field in extjs 3.4 dynamically

Question

i am using extjs 3.4 add add this code for add /remove key value pair in field set but is not working fine it is add the field dynamically but when we remove this browser given the infinite loop error and after some time field is also given the following error:

TypeError: this.dom is undefined here is my code :

//This js for test only

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

It looks like it is bug in Ext JS. When you put normal Container instead of CompositeField then it works properly. I figured out that CompositeField subfields are added to BasicForm (FormPanel.getForm) on CompositeField creation, but aren't removed. This causes that, for example, BasicForm validation refers to destroyed fields, and causes error. IMO you can freely switch from CompositeField to Container.