Checkboxgroup getting duplicates value on second call - extjs

Question

I am displaying checkboxgroup on a window with other fields too.
But the second time I call the function to display this window with the checkboxgroup the checkboxgroup gets duplicated.
i.e It only displays two times and not multiple times.
Eg : If actual checkbox values are "red" , "green" then the result on second ,third call will be "red" , "red" , "green" , "green".
Even the +Checklist button displays twice on second or more calls.
It displays proper values on first call though.
below is the code I am working on.
var checkboxconfigs = [];
function showassetForm(record,statusname,emptyval)
{
var arrSubTicket = getSubTickets(record.data.Id);
for(z=0;z<arrSubTicket.length;z++)
{
checkboxconfigs.push({ //pushing into array
id:arrSubTicket[z].Id,
boxLabel:arrSubTicket[z].Name,
name:'checklist',
inputValue:arrSubTicket[z].Id,
relatedTicket:arrSubTicket[z].TicketId
//any other checkbox properties, layout related or whatever
});
}
var myCheckboxGroup = Ext.create('Ext.form.CheckboxGroup', {
columns: 1,
vertical: true,
items: checkboxconfigs
});
myCheckboxGroup.on({
change: function(checkboxGroup, newValue) {
formattedValues = [];
newValue = newValue.checklist.length === 0 ? [newValue.checklist] : newValue.checklist;
checkboxGroup.items.each(function(checkbox){
var checkboxValue = checkbox.inputValue,
foramttedValue = {};
foramttedValue[checkboxValue] = newValue.indexOf(checkboxValue) !== -1 ? 'on' : 'off';
formattedValues.push(foramttedValue);
});
}
});
form = Ext.widget('form', {
layout: {
type: 'vbox',
align: 'stretch'
},
border: false,
bodyPadding: 10,
fieldDefaults: {
labelAlign: 'top',
labelWidth: 100,
labelStyle: 'font-weight:bold'
},
defaults: {
margins: '0 0 10 0'
},
items: [{
xtype: 'fieldcontainer',
labelStyle: 'font-weight:bold;padding:0',
layout: 'vbox',
defaultType: 'textfield',
fieldDefaults: {
labelAlign: 'left'
},
items: [
/*{
flex: 1,
name: 'Name',
fieldLabel: 'Ticket Description',
allowBlank: true
},*/
{
name: 'Hours',
fieldLabel: 'Hours',
allowBlank: true,
value: record.data.Hours
},
{
flex: 2,
xtype:'textarea',
name: 'Notes',
fieldLabel: 'Ticket Notes',
allowBlank: true
},
{
xtype: 'combo',
fieldLabel: 'Status',
hiddenName: 'Status',
allowBlank: false,
name:'Status',
store: new Ext.data.SimpleStore({
data: allstatus,
id: 0,
fields: ['value', 'text']
}),
// valueField: 'value',
valueField: 'value',
displayField: 'text',
triggerAction: 'all',
editable: false,
// value : record.data.Status
value : statusname
},
{
xtype: 'combo',
fieldLabel: 'Priority',
hiddenName: 'Priority',
allowBlank: false,
name:'Priority',
store: new Ext.data.SimpleStore({
data: priorities,
id: 0,
fields: ['value', 'text']
}),
// valueField: 'value',
valueField: 'value',
displayField: 'text',
triggerAction: 'all',
editable: false,
value : record.data.Priority
},
{
xtype: 'button',
id: 'newSubTicket',
cls:'x-btn-default-small',
text: '+ Checklist',
handler : function () {
createSubticket(record,statusname);
},
style : 'margin:0 0px'
},
myCheckboxGroup
]
}],
buttons: [{
text: 'Cancel',
handler: function() {
this.up('form').getForm().reset();
this.up('window').hide();
}
}, {
text: 'Save',
handler: function() {
if (this.up('form').getForm().isValid())
{
// In a real application, this would submit the form to the configured url
// this.up('form').getForm().submit();
form = this.up('form').getForm();
var recordsToAdd = [],recordsToAddNotes = [];
var record1 = {},recordNotes = {};
//this.up('window').hide();
//var summary = form.findField('Name').getSubmitValue();
var hrs = form.findField('Hours').getSubmitValue();
var status = form.findField('Status').getSubmitValue();
var priority = form.findField('Priority').getSubmitValue();
var notes = form.findField('Notes').getSubmitValue();
record1['ccfive_related_ticket_status']=status;
record1['dev_priority']=priority;
record1['io_uuid'] = record.data.Id;
//console.log("TicketName="+record.data.TicketName);
recordsToAdd.push(record1);
recordNotes['dev_note'] = notes;
recordNotes['dev_hours'] = hrs;
recordNotes['dev_related_punchlist_item'] = record.data.Id;
recordNotes['ccfive_related_ticket_status'] = status;
recordsToAddNotes.push(recordNotes);
}
}
}]
});
win = Ext.widget('window', {
title: record.data.TicketName,
closeAction: 'hide',
width: 400,
height: 450,
minHeight: 220,
layout: 'fit',
resizable: true,
modal: true,
items: form
});
win.show();
}
This is what I get on first call
But after clicking on cancel and calling the function it displays me.
Duplicate checkboxes and checklist button on second call

Answer 1

Move var checkboxconfigs = []; into showassetForm function
function showassetForm(record, statusname, emptyval) {
var checkboxconfigs = [];
var arrSubTicket = getSubTickets(record.data.Id);

Answer 2

The issue was just of passing id to some parameters on form.
Extjs sometimes behaves weird if Id is passed.
Removed id parameter and it worked fine!

Answer 3

Try and avoid duplicate ids (see comment "double check this"):
for(z=0;z<arrSubTicket.length;z++)
{
checkboxconfigs.push({
id:arrSubTicket[z].Id, // <==================== double check this!!
boxLabel:arrSubTicket[z].Name,
name:'checklist',
inputValue:arrSubTicket[z].Id, // <============ double check this!!
relatedTicket:arrSubTicket[z].TicketId
});