Question

I am building an application and I am trying to keep it object oriented. The issue is that the alert box doesn’t appear when the button is clicked. I believe it is an issue with the scope of the button. It could also be related to the way i am building my app. It is based off of an example provided by Sencha. I have searched, and tried many things, but I haven’t come up with a solution. Here is my code:

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

The issue is property should be called handler not hander

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