如何使用 ExtJS 4 中控制器的控制方法更改范围？

Question

在带有 Ext.app.Controller 类的 control() 方法的 ExtJS 中，我可以将侦听器添加到通过控制器的 init() 方法中的 Ext.ComponentQuery 选择的组件。

默认情况下，我的处理程序函数中有控制器范围。有没有办法在这里指定其他范围？

例如在这种情况下：

Ext.define('BackOffice.controller.BaseList', {
    extend: 'Ext.app.Controller',

    refs: [
        // some refs
    ],

    init: function() {
        this.control({
            'bo-list-view > toolbar > button[action=create-new]': {
                click: this.onCreateNewClick
            },

            'bo-list-view > toolbar > button[action=edit]': {
                click: this.onEditClick
            },

            'bo-list-view > toolbar > button[action=refresh]': {
                click: this.onRefreshClick
            }
        })
    },

    // ...
});

在处理函数中，我想知道单击的确切按钮以根据此信息执行某些操作。

我尝试通过范围字段在按钮声明中指定范围，但这没有帮助。

我也想使用 Ext.bind() 来解决这个问题，但是要将函数绑定到我需要再次引用按钮。

使用 .on() 添加监听器在 init() 中不起作用，因为它是在应用程序的启动方法之前调用的。

有什么方法可以从控制器添加监听器到这个按钮来保存范围？

更新

对按钮的引用作为第一个参数传递给处理函数。 这解决了我的问题，但仍在寻找一种在 control() 方法中定义范围的方法。

Answer 1

您可以通过使用配置对象来实现更高级的范围功能。

Ext.define('BackOffice.controller.BaseList', {
    extend: 'Ext.app.Controller',

    refs: [
        // some refs
    ],

    init: function() {
        this.control({
            'bo-list-view > toolbar > button[action=create-new]': {
                // This will call onCreateNewClick with global window as the scope
                click: {fn: this.onCreateNewClick, scope: window}
            },

            'bo-list-view > toolbar > button[action=edit]': {
                click: {fn: this.onEditClick, scope: otherScopeObj}
            },

            'bo-list-view > toolbar > button[action=refresh]': {
                click: this.onRefreshClick
            }
        });
    },

    // ...
});

我不知道所有正常配置是否都有效（即 single: true），但 scope 可以。

Answer 2

如果您查看click 事件的描述：http://docs.sencha.com/ext-js/4-0/#!/api/Ext.button.Button-event-click，您将看到第一个参数将是指向按钮的指针，即您不需要更改范围 - 只需在函数中声明参数并您将知道按下了哪个按钮。