extjs4.2 - Extjs 4.2 attach an handler to a panel tool do not work -

here doing:

ext.define('ng.view.taxinvoice.widget', {     extend: 'ng.code.portal.portlet',     alias: 'widget.taxinvoicewidget',     layout: 'card',      tools: [{         type: 'gear',         scope: this,         callback: 'ongeartoolclick'     }],      items: [{         xtype: 'taxinvoicelist'     }, {         html: 'taxinvoicegraph'     }],      ongeartoolclick: function (panel) {         alert('1111') not invoked!     } }); 

the alert statement never fired... can tell me why?

update

ok way worked using accepted answer @kevhender this:

ext.define('ng.view.taxinvoice.widget', { extend: 'ng.code.portal.portlet', alias: 'widget.taxinvoicewidget', layout: 'card',

items: [{     xtype: 'taxinvoicelist' }, {     html: 'taxinvoicegraph' }],  initcomponent: function () {     this.tools = [{         type: 'gear',         scope: this,         callback: 'ongeartoolclick'     }];      this.callparent(arguments); },  ongeartoolclick: function (panel) {     alert('1111') fires :) } 

});

i don't believe framework supports using strings specify name of callback function here, should use actual function. if want use member function, you'll have define tools within initcomponent:

initcomponent: function() {     this.tools = [{         type: 'gear',         scope: this,         callback: this.ongeartoolclick     }];     this.callparent(arguments); } 

you way have if use anonymous function:

ext.define('ng.view.taxinvoice.widget', {     extend: 'ng.code.portal.portlet',     alias: 'widget.taxinvoicewidget',     layout: 'card',      tools: [{         type: 'gear',         scope: this,         callback: function() {             //define fn here         }     }],      ... });