mercredi 9 janvier 2019

Ext.js 2 checkboxes and the events are firing twice with the change listener

The problem here is that when I press either one of the checkboxes the checbox gets unmarked it sort of fires both of the change events. How can this be avoided?

What I am trying to do is have to checkboxes the possible cases are:

  1. both marked.
  2. one marked (vod or npvr)
  3. both unmarked

In the end what I want is to establish the content_type which receives different values according to what is marked and passes it to the main form.

{
                    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({});
                                    }
                                }
                            }
                        }
                    ]
                }



Aucun commentaire:

Enregistrer un commentaire