Ext.js 2 флажки и события запускаются дважды с прослушивателем изменений

Question

Проблема здесь в том, что когда я нажимаю один из флажков, флажок чекбокса становится неотмеченным, он как бы запускает оба события изменения. Как этого можно избежать?

Я пытаюсь установить флажки. Возможны следующие случаи:

1. оба отмечены.
2. один помеченный (vod или npvr)
3. оба без опознавательных знаков

В конце концов, я хочу установить 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({});
                                    }
                                }
                            }
                        }
                    ]
                }

Answer 1

setValue () компонента всегда запускает событие изменения. Таким образом, каждый раз, когда вы нажимаете на флажок, вы запускаете одно событие изменения, но затем внутри этого прослушивателя / события изменения вы также устанавливаете значение для группы флажков, и там происходит срабатывание второго события изменения. Когда вы устанавливаете значение флажка, флажок изменяется, поэтому запускается его собственное событие изменения.

Answer 2

Этого можно избежать, поместив прослушиватель изменений на уровень группы флажков вместо записи его на уровнях элементов.