Dataview 구성 요소 변경 이벤트가 무한 루프로 실행됩니다.

Question

패널 및 토글 버튼으로 데이터보기 구성 요소를 만들려고합니다. 토글 버튼의 ​​초기 상태는 상점의 필드로 설정되고 토글 버튼을 클릭하면 특정 기능을 호출하여 백엔드에서 상태를 업데이트해야합니다. 그러나 페이지가로드 될 때 백엔드에서 토글 버튼의 ​​상태를 초기화하고 있으므로 change 이벤트는 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; 
     } 

}