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

Question

In ExtJS with control() method of Ext.app.Controller class I can add listeners to components selected via Ext.ComponentQuery inside controller's init() method.

Doing so by default I have the controller scope inside my handler functions. Is there a way to specify some other scope here?

For example in this case:

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

    // ...
});

In handler functions I want to know the exact buttons clicked to perform some actions based on this information.

I've tried specifying scope within button declaration via scope field, this doesn't help.

Also I wanted to use Ext.bind() to solve the issue, but to bind the function to I need some reference to the button again.

Using .on() to add listeners doesn't work in init() because it's called before application's launch method.

Is there any way to add listeners to this buttons from controller saving the scope?

Update

The reference to the button is passed as the first argument into the handler function. This solves my problem, but still looking for a way to define the scope inside control() method.

Answer 1

You can achieve more advanced scope functionality by using a configuration object.

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
            }
        });
    },

    // ...
});

I don't know if all the normal configs work (ie single: true) but scope does.

Answer 2

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