按下按钮时 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');
  }
}];