Событие изменения компонента Dataview выполняется в бесконечном цикле

Question

Я пытаюсь создать компонент dataview с панелью и кнопкой переключения. Внутренние состояния кнопки переключения задаются полем в хранилище и при нажатии кнопки переключения необходимо вызвать определенные функции для обновления состояния в backend. Но поскольку я инициализирую состояние кнопки переключения из бэкэнд при загрузке страницы , событие изменения вызывается на самом запуске, из-за чего кнопка переключается бесконечно, вызывая логику внутри части CHANGE EVENT спина к спине. Просьба помочь как о том, как предотвратить событие изменения при вызове на загрузку страницы и вызываться только при нажатии пользователем кнопки переключения?

/** 

var togglevalue = 0, count = 0; 
Ext.define('PMDQ.view.EquipmentDVItem', { 
    extend: 'Ext.dataview.component.DataItem', 
    requires: [ 
     'Ext.field.Toggle' 
    ], 
    alias: 'widget.equipmentdvitem', 

    config: { 
     layout: 'fit', 
     cls: 'cartitem-cls', 
     dataMap: { 

      // Map product's data to dataItem setter 
      getEqpmntdvinneritem: { 
       setDisplayName: 'ChecklistText' 
      }, 
      getTogglebutton: { 
       setValue: "ItemValue" 
      } 
     }, 

     eqpmntdvinneritem: { 
      flex: 2 
     }, 

     togglebutton: { 
      itemId: "itemspinnerfield", 
      flex: 1, 
      name: 'single_toggle' 
     }, 

     layout: { 
      type: 'hbox', 
      align: 'center' 
     } 
    }, 
    applyEqpmntdvinneritem: function (config) { 
     console.log(PMDQ.view.EquipmentDVInnerItem); 
     return Ext.factory(config, 
      PMDQ.view.EquipmentDVInnerItem, 
      this.getEqpmntdvinneritem()); 
    }, 
    updateEqpmntdvinneritem: function (newItemLine, oldItemLine) { 
     if (oldItemLine) { 

      this.remove(oldItemLine); 
     } 

     if (newItemLine) { 
      // Attach lines to DataView 
      newItemLine.on('tap', this.onTogglebuttonTap, this); 
      this.add(newItemLine); 
     } 
    }, 

    applyTogglebutton: function (config) { 
     return Ext.factory(config, Ext.field.Toggle, this.getTogglebutton()); 
    }, 

    updateTogglebutton: function (newTogglebutton, oldTogglebutton) { 
     if (oldTogglebutton) { 
      this.remove(oldTogglebutton); 
     } 

     if (newTogglebutton) { 
      // add an event listeners for the `tap` event onto the new button, and tell it to call the onNameButtonTap method 
      // when it happens 

      newTogglebutton.on('load', this.onTogglebuttonTap, this); 
      newTogglebutton.on('change', this.onTogglebuttonChange, this); 

      this.add(newTogglebutton); 
     } 
    }, 

     onTogglebuttonTap: function() { 
     var record = this.getRecord(), me = this; 
     count = 0; 
    }, 

    onTogglebuttonChange: function (slider, newValue, oldValue, thumb) { 
     var record = this.getRecord(), me = this , store = me.getStore(); 

      if (oldValue == 0 && newValue == 1) { 
       var val = record.get("InputAllowed"); 
       if (val == "X") { 
        alert("onMPValueEnteronMPValueEnter" + count); 
        me.fireEvent("onMPValueEnter", this, record); 
        togglevalue = 0; 
       } 
       else { 
        me.fireEvent("onToggleSave", this, oldValue, newValue, record); 
        togglevalue = 0; 
       } 
      } 
      else if (oldValue == 1 && newValue == 0) { 
       alert("onToggleSave Off" + count); 
       me.fireEvent("onToggleSave", this, oldValue, newValue, record); 
       togglevalue = 0; 
      } 

    } 



}); 

Answer 1

Вы можете добавить условное в слушателе, который затем будет установлен в первый раз, что пункт «установить», а затем вы можете действовать как обычно хотел.

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

togglebutton: { 
     toggleSet: false, // <-- for example here. 
     itemId: "itemspinnerfield", 
     flex: 1, 
     name: 'single_toggle' 
    } 

Затем внести поправки прослушиватель, чтобы проверить, если он только был загружен и установить первый или последующие разы:

onTogglebuttonChange: function (slider, newValue, oldValue, thumb) { 
    // Added a conditional to check if the toggle has been initially set or not. 
    if (!slider.toggleSet){ 
     // Now set the toggleSet so next time the listener runs, it will continue below. 
     slider.toggleSet = true; 
     return; 
    } 

    var record = this.getRecord(), me = this , store = me.getStore(); 

     if (oldValue == 0 && newValue == 1) { 
      var val = record.get("InputAllowed"); 
      if (val == "X") { 
       alert("onMPValueEnteronMPValueEnter" + count); 
       me.fireEvent("onMPValueEnter", this, record); 
       togglevalue = 0; 
      } 
      else { 
       me.fireEvent("onToggleSave", this, oldValue, newValue, record); 
       togglevalue = 0; 
      } 
     } 
     else if (oldValue == 1 && newValue == 0) { 
      alert("onToggleSave Off" + count); 
      me.fireEvent("onToggleSave", this, oldValue, newValue, record); 
      togglevalue = 0; 
     } 

}