复选框组在第二次调用时获取重复值

Question

我也在带有其他字段的窗口上显示复选框组。 但是我第二次调用该函数来显示这个带有复选框组的窗口时，复选框组被复制了。

即它只显示两次而不是多次。

例如：如果实际的复选框值为 "red" 、 "green"，那么第二次、第三次调用的结果将是 "red" 、 "red" 、 "green" 、 "green"。

即使是 +Checklist 按钮也会在第二次或更多次调用时显示两次。

它在第一次调用时显示正确的值。

下面是我正在处理的代码。

 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

但在点击取消并调用该函数后，它会显示我。

Duplicate checkboxes and checklist button on second call

Answer 1

移动 var checkboxconfigs = [];进入 showassetForm 函数

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

Answer 2

问题只是将 id 传递给表单上的某些参数。 如果传递了 Id，Extjs 有时会表现得很奇怪。 去掉 id 参数，效果很好！

Answer 3

尽量避免重复的 ID（请参阅评论“仔细检查”）：

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