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"是否存在问题。

- SolessChong

---

你应该清理掉末尾的逗号，否则在某些浏览器中会出现错误。 - Towler

好的，开发完成后我会这样做。有没有关于此的第三方工具？@Towler - SolessChong

我还没有遇到过这样的情况，但我也没有特别努力地去寻找。如果你找到了，请告诉我！ - Towler

Answer 1

你说得对，这是一个作用域问题 - 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();
}

- Towler

---

完美运作。我选择了你的第二个解决方案。很遗憾我不能投多于一次的赞。 - SolessChong

我更喜欢第一个，因为它使代码更加简洁。但是，当我使用它时，我会使用"btn.up()..."而不是"this.up()..."以增强清晰度。这样我就不必处理作用域问题了。 - Mike Post

最好在“text: 'Add...”和“handler:...”之间添加“scope: this”，这样处理程序的范围就指向按钮所属的对象。 - Johan Van de Merwe

Answer 2

设计类的正确方式如下。在调用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');
   }
});

- Johan Van de Merwe