Ext.js 2 复选框和事件通过更改侦听器触发两次

Posted 2023-02-22

【中文标题】Ext.js 2 复选框和事件通过更改侦听器触发两次

【英文标题】：Ext.js 2 checkboxes and the events are firing twice with the change listener

【发布时间】：2019-06-03 23:09:05

【问题描述】：

这里的问题是，当我按下任一复选框时，复选框会被取消标记，它会触发两个更改事件。如何避免这种情况？

我要做的是必须勾选可能的情况是：

均已标记。 一个标记（vod 或 npvr） 两者均未标记

最后我想要的是建立content_type，它根据标记的内容接收不同的值并将其传递给主窗体。

                    xtype     : "checkboxgroup",
                    fieldLabel: "Content type",
                    name          : "content_type",
                    id            : "fx-form-content_type",
                    rows   : 1,
                    value  : 0,
                    editable      : false,
                    forceSelection: true,
                    queryMode     : "local",
                    horizontal  : true,
                    hidden    : false,
                    valueField    : "value",
                        items     : [
                        
                            //xtype     : "checkboxfield",
                            boxLabel: "VOD",
                            checked   : false,
                            name      : "VOD",
                            inputValue: 1,
                            id: "fx-form-content_type-VOD",
                            value: 1,
                            labelWidth: 40,
                            listeners     : 
                                change: function (checkbox, newValue, oldValue, eOpts) 
                                    console.error(checkbox);
                                    var isVOD = newValue;
                                    var isNPVR = Ext.getCmp("fx-form-content_type-NPVR").value;

                                    if(isVOD && isNPVR)
                                    
                                        Ext.getCmp("fx-form-content_type").setValue(0);
                                    
                                    else if(isVOD)
                                    
                                        Ext.getCmp("fx-form-content_type").setValue(VOD: 1);
                                        console.warn(Ext.getCmp("fx-form-content_type").valueOf());
                                    
                                    else if(isNPVR)
                                    
                                        Ext.getCmp("fx-form-content_type").setValue(NPVR: 2);
                                    
                                    else
                                        
                                            Ext.getCmp("fx-form-content_type").setValue();
                                        
                                
                            

                        ,
                        
                            //xtype     : "checkboxfield",
                            boxLabel: "NPVR",
                            checked   : false,
                            name      : "NPVR",
                            inputValue: 2,
                            id: "fx-form-content_type-NPVR",
                            value: 2,
                            labelWidth: 40,
                            listeners     : 
                                change: function (checkbox, newValue, oldValue, eOpts) 
                                    console.error(checkbox);
                                    var isNPVR = newValue;
                                    var isVOD = Ext.getCmp("fx-form-content_type-VOD").value;

                                    if(isVOD && isNPVR)
                                    
                                        Ext.getCmp("fx-form-content_type").setValue(0);
                                    
                                    else if(isVOD)
                                    
                                        Ext.getCmp("fx-form-content_type").setValue(VOD: 1);
                                    
                                    else if(isNPVR)
                                    
                                        Ext.getCmp("fx-form-content_type").setValue(NPVR: 2);
                                    
                                    else
                                    
                                        Ext.getCmp("fx-form-content_type").setValue();
                                    
                                
                            
                        
                    ]
                

【问题讨论】：

为什么您在更改时尝试设置“fx-form-content 类型”？，这是您刚刚单击的复选框组？如果你“getValue”“fx-form-content type”你会得到一个检查过的itens值的数组，不需要设置任何东西。如果您需要基于所选选项组合的不同值，请将其存储在隐藏字段中

【参考方案1】：

组件的 setValue() 总是触发 change 事件。因此，每次单击复选框时，都会在那里触发一个更改事件，但是在该更改侦听器/事件中，您还设置了复选框组的值，并且发生第二个更改事件的位置。当您设置复选框的值时，复选框会更改，因此会触发其自己的更改事件。

【参考方案2】：

这可以通过将更改侦听器放置在复选框组级别而不是在项目级别编写来避免。

【讨论】：

即使在这种情况下也无法避免，因为它会触发两次。我已经尝试过了，并且得到了相同的结果，我尝试设置的值 Ext.getCmp("fx-form-content_type") 在这种情况下始终为 3。