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