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

If you look at description of the click event: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.button.Button-event-click you will see that very first arguments will be pointer to the button, i.e. you don’t need to change the scope – just declare arguments in your function and you will know which button was pressed.