ExtJS按鈕處理程序不工作

Question

單擊後，我的ExtJS按鈕的處理程序不會被調用。現在代碼看起來像這樣。

Ext.define('EDS.view.selector.Container', { 
    extend: 'Ext.form.Panel', 
    alias : 'widget.selectorcontainer', 

    title: 'Selector_V2', 
    renderTo: 'input-div', 
    layout: 'fit', 
    height: '100%', 

    items: [ 
      { 
       xtype: 'tabpanel', 
       defaults: { 
        bodyPadding: 10 
       }, 
      } 
    ], 
    buttons: [ 
     { 
      text: 'Reset', 
      handler: function(){ 
       console.log("Reset"); 
       this.up('form').getForm().reset(); 
      } 
     }, 
     { 
      text: 'Add to constrain', 
      handler: this.addConstrain, 
     } 
    ], 

    /* 
    * Logic for button "Add to constrain" 
    * 
    * Adds an entry into the constrain list describing a person, cost center or an application 
    */ 
    addConstrain: function(button, event){ 
     console.log('Add_to_constrain clicked'); 
    } 
}); 

最初這'selectorcontainer'被放在我的app.js。但是我將其解壓縮爲獨立視圖。提取之前，它工作完美，但現在它不工作。

順便說一句，我有兩個按鈕，第一個「重置」工作正常。所以我想知道是否有與範圍確定相關的「this.addConstrain」有問題。

Answer 1

設計你的班級的正確方法就是這樣。在執行callParent之前，將您的配置設置應用於對象。

Ext.define('EDS.view.selector.Container', { 
    extend: 'Ext.form.Panel', 
    alias : 'widget.selectorcontainer', 

    title: 'Selector_V2', 
    renderTo: 'input-div', 
    layout: 'fit', 
    height: '100%', 

    initComponent: function() { 

     Ext.applyIf(this, { 

      items: [ 
       { 
        xtype: 'tabpanel', 
        defaults: { 
         bodyPadding: 10 
        } 
       } 
      ], 
      buttons: [ 
       { 
        text: 'Reset', 
        scope: this,     // <--- scope to form panel 
        handler: function(){ 
        console.log("Reset"); 
        this.getForm().reset(); 
        } 
       }, 
       { 
        text: 'Add to constrain', 
        scope : this,    // <--- scope to form panel 
        handler: this.addConstrain 
       } 
      ] 
     }); 

     this.callParent(arguments); 

    } 
    /* 
    * Logic for button "Add to constrain" 
    * 
    * Adds an entry into the constrain list describing a person, cost center or an  application 
    */ 
    addConstrain: function(button, event){ 
     console.log('Add_to_constrain clicked'); 
    } 
}); 

Answer 2

你說得對，這是一個範圍問題 - this不是你正在定義的類;這是在調用Ext.define函數時的範圍（可能爲window）。有幾種方法可以解決這個問題。最簡單的（在我看來）是改變你的處理程序的工作方式類似於復位處理程序：

{ 
    text: 'Add to constrain', 
    handler: function(btn, e) { 
     //'this' is now the button 
     this.up('selectorcontainer').addConstrain(btn, e); 
    } 
} 

您還可以添加按鈕爲initComponent功能的一部分，而不是將它們定義爲Ext.define配置的一部分。

initComponent: function() { 
    //'this' is now the selector container 
    this.buttons = [{ 
     text: 'Reset', 
     handler: function(){ 
      console.log("Reset"); 
      this.up('form').getForm().reset(); 
     } 
    }, { 
     text: 'Add to constrain', 
     handler: this.addConstrain 
    }]; 

    this.callParent(); 
}