Button Extjs警报不'；按下按钮时不工作（按钮范围问题）

我正在构建一个应用程序，并试图使其保持面向对象。问题在于，单击按钮时，警报框不会出现。我认为这是按钮范围的问题。这也可能与我构建应用程序的方式有关。它基于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,        
    }); 
});

---

问题是属性应该被称为

handler

而不是

hander

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

---

现在我觉得自己很笨。我花了一上午的时间想弄明白。我想我需要更多的咖啡，别担心。当你们发现自己的ExtJS代码在拼写错误的情况下仍能正常工作时，你们迟早会发现自己处于这种情况。现在这太令人困惑了！