Extjs 4.2 将处理程序附加到面板工具不起作用

Question

这是我正在做的事情：

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') This is not invoked!
    }
});

永远不会触发警报语句... 你能告诉我为什么吗？

更新

好的，它的工作方式是使用@kevhender 接受的答案，如下所示：

Ext.define('NG.view.taxinvoice.Widget', { 扩展：'NG.code.portal.Portlet', 别名：'widget.taxinvoicewidget', 布局：'卡片'，

items: [{
    xtype: 'taxinvoicelist'
}, {
    html: 'taxinvoicegraph'
}],

initComponent: function () {
    this.tools = [{
        type: 'gear',
        scope: this,
        callback: 'onGearToolClick'
    }];

    this.callParent(arguments);
},

onGearToolClick: function (panel) {
    alert('1111') Now it fires :)
}

});

Answer 1

我不相信框架支持在这里使用字符串来指定回调函数的名称，你应该使用实际的函数。如果要使用成员函数，则必须在initComponent 中定义tools：

initComponent: function() {
    this.tools = [{
        type: 'gear',
        scope: this,
        callback: this.onGearToolClick
    }];
    this.callParent(arguments);
}

如果您使用匿名函数，您也可以按照现在的方式进行操作：

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
        }
    }],

    ...
});