按下按钮时 Extjs 警报不起作用（按钮范围问题）

Question

我正在构建一个应用程序，并试图使其保持面向对象。问题是单击按钮时不会出现警报框。我认为这是按钮范围的问题。这也可能与我构建应用程序的方式有关。它基于 Sencha 提供的示例。我已经搜索并尝试了很多方法，但我还没有找到解决方案。这是我的代码：

Ext.require([
    'Ext.grid.*',
    'Ext.panel.*',  
    'Ext.msg.*'     
]);
Ext.Loader.onReady(function() {
Ext.define('App.SimplePanel', {
        extend: 'Ext.Panel',
        alias: 'widget.SimplePanel',    
        width: 100,
        height: 50, 

        initComponent: function() {     
        this.buttons = [{
            text: 'Trigger Alert',  
            scope: this,
            hander: function(){                 
                Ext.Msg.alert('Title', 'TestAlert');
            }
        }];         
        this.callParent();
        }   
    });
}, false);
Ext.onReady(function() {
    // create an instance of the app
    var simplePanel = new App.SimplePanel({
        renderTo: document.body,        
    }); 
});

Answer 1

问题是属性应该被称为 handler 而不是 hander

this.buttons = [{
  text: 'Trigger Alert',  
  scope: this,
  handler: function(){                 
    Ext.Msg.alert('Title', 'TestAlert');
  }
}];