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){
}
},
});
});
