PDA

View Full Version : remove the dynamically generated checkboxes from the form



Komal Vaswani
17 Jan 2011, 8:48 PM
Hi,
I hv generated one form in which I m adding the dynamically generated checkboxes on select event of combobox.
Now on every new selection of combobox I want to remove the checkboxes of previous selection from the form.
I hv written following code in which dynamically generated checkboxes arrive on form but how to remove them on next selection from combobox??



var frmDelRole;
var winDelRole;
var sampleStore;
var ComboStore;
var combovalue;
var optionJsonArray = new Array();
var myNewRecord ;
Ext.onReady(function() {
Ext.QuickTips.init();
ComboStore = new Ext.data.JsonStore(
{
url : 'role.action?type=delrolecombo',
method:'POST',
remoteSort : false,
root : 'list',
idProperty : 'id',
fields : ['Name']
//,autoLoad : true
}
);
sampleStore= new Ext.data.JsonStore({
url : 'role.action?type=deleteRole',
baseParams: {cv: combovalue},
method:'POST',
remoteSort : false,
root: 'list',
idProperty : 'id',
fields: ['field1']
//,autoLoad:true
});

sampleStore.on(
'load', function () {
var i = 0;
sampleStore.data.each(function() {
myNewRecord = " {name: '" +this.data['field1'] + "',boxLabel:'"+ this.data['field1']+"'}";
optionJsonArray[i] = Ext.util.JSON.decode(myNewRecord);

i = i + 1;

});
frmDelRole.add(cretaecheckbox());
frmDelRole.doLayout();
var len = frmDelRole.items.length;
alert("length is:" + frmDelRole.items.length);
});

function cretaecheckbox(){
var checkbox = new Ext.form.CheckboxGroup({
id:'checkGroup',
xtype: 'checkboxgroup',
anchor : '-20',
columns: 3,
items: [optionJsonArray]
});
return checkbox;
}
frmDelRole = new Ext.FormPanel({
frame : false,
border : false,
buttonAlign : 'center',
bodyStyle : 'padding:150px 150px 20px 15px 15px;',
width : 430,
monitorValid: true,
labelWidth : 160,
id : 'frmDelRole',
items : [
{
xtype : 'combo',
fieldLabel : '<font color=#15428B><b>Select Company</b></font>',
id : 'cmpRole',
name : 'cmpRole',
store : ComboStore,
displayField : 'Name',
valueField : 'Name',
triggerAction : 'all',
mode : 'local',
autoSelect : false,
forceSelection : true,
disableKeyFilter : false,
typeAhead : false,
lazyInit : false,
emptyText : 'Please Select',
selectOnFocus : false,
listeners : {
select : {
fn : function(combo,value) {
frmDelRole.remove(cretaecheckbox());
combovalue = combo.getValue();

sampleStore.baseParams = {cv:combovalue};

sampleStore.load();

}
}
},
width : 200,
height : 100
}
],

buttonAlign : 'center',
buttons : [{
text : '<font color=#15428B size=2><b>Delete</b></font>',
id:'rolebtn'

} //end of button

]
}); //end of form

winDelRole = new Ext.Window({
title : '<font color=#15428B size=3><b><center>Delete Role</center></b></font>',
id : 'winDelRole',
layout : 'fit',
width : 410,
height : 195,
resizable : false,
closable : false,
items : [frmDelRole]

});
//winDelRole.show();
}); //end of onReady

Thanks,

Komal

vishalnnsingh
17 Jan 2011, 9:03 PM
fn : function(combo,value) {
frmDelRole.remove(cretaecheckbox()); // createCheckbox returns a new
//group right then why using it in remove
combovalue = combo.getValue();

sampleStore.baseParams = {cv:combovalue};

sampleStore.load();

}

Instead make your checkbox variable, declared inside createCheckbox() global , so that when removing the checkbox groiup what you will need to do is just pass the reference to the remove method, and then in the next line call createCheckBox to have a new set of checkboxes.

Komal Vaswani
17 Jan 2011, 11:43 PM
Hi, can u gv me example in my code only..bcz I tried as u said but its not working. once checkboxes dynamically added on form are not gng to remove on the next selection from combobox..they remain on the form. Thanks, Komal

Condor
18 Jan 2011, 12:12 AM
This will remove the CheckboxGroup:

frmDelRole.remove(Ext.getCmp('checkGroup'));