PDA

View Full Version : add/remove compositefield in a fieldset in a formpanel doesn't work properly



@naresh
21 May 2013, 10:17 PM
hi i am using extjs 3.4 add try to add remove compositefield in a fieldset in a fromPanel error is an endless loop occur .

here is my code :
{
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) {
var fieldset = roomPanel.findByType('fieldset')[0],
composite = roomPanel.findByType('compositefield'+id),
c = 0,
cNum = composite.length;


for (; c < cNum; c++) {
alert(cNum)
fieldset.remove(composite[c]);
}
// fieldset.remove('compositefieldId'+id);
}
}
})]
}

mitchellsimoens
24 May 2013, 5:03 AM
This is working for me:


new Ext.form.FormPanel({
renderTo : document.body,
items : [
{
xtype : 'fieldset',
title : 'Test',
items : [
{
xtype : 'textfield',
fieldLabel : 'Foo'
}
],
tbar : [
{
text : 'Add Field',
handler : function (button) {
var fieldset = button.ownerCt.ownerCt;

fieldset.add({
xtype : 'compositefield',
fieldLabel : 'Bar',
items : [
{
xtype : 'textfield'
},
{
xtype : 'textfield'
}
]
});

fieldset.doLayout();
}
}
]
}
]
});