ExtJS4 - how to get parent grid on selectionchange?

Question

I have little experience with ExtJS3 and now starting with version 4.

In my controller, I have this:

init: function ()
{
    this.control({
        "userlist":
        {
            selectionchange: function (view, selected, opts)
            {
                 //get to grid??
            }
        }
    });
}

How can I access the grid that this event happened on, without using id's? I want to enable/disable buttons on the grid toolbar (tbar) if there are items selected, but I don't want to give anything id's (not the bar, not the individual buttons)

EDIT: the solution was to use the refs property in the controller:

refs:
[
    {
        ref: "list",
        selector: "userlist"
    }
],


selectionchange: this.activateTbButtons

activateTbButtons: function (selected, opts)
{
    if (selected.selected.length == 1)
    {
        var tb = this.getList().query("toolbar");
    }
}

Answer 1

Having the same problem and found the previous answers missing some points. In short, I recommend:

selectionchange: function (selModel, selected, eOpts) {
  var grid = selModel.view.ownerCt;
}

This was already proposed by Adezj although it referred to the selectionchange event that has the view as the first argument, and is not applicable to ExtJS 4.0.7+. (Don't think that selectionchange ever had the view as an argument?)

Note that this might not be officially supported by ExtJS since the view property of the selection model is not mentioned in the API docs at all.

Another approach is to use Ext.ComponentQuery.query(...) or defining refs in the controller, as proposed by Arun V, which is basically just a handy wrapper for Ext.ComponentQuery.query(). This works fine if you only have individual instances of the grid class but you need to take care in case you have multiple instances of the same grid class. Simply doing Ext.ComponentQuery.query('xtype-of-your-grid') will return all instances of your grid and you will have lots of fun finding out in which one the user has selected something.

So, in general, I would highly recommend to always work your way up from the component or object that fired the event to be sure you are in the right branch of the component hierarchy unless you are sure you will never have more than one instance of that class you write a controller for.

Answer 2

Just found out that you can use the attribute view, and views under Ext.selection.Model.

This can be useful in cases when you let's say open multiple instances of your objects.

So, to access the grid in your example:

selectionchange: function (view, selected, opts) {
 //get to grid??
 var grid = view.view.ownerCt;
}

Answer 3

EDIT

I took a look at the docs for the selectionChange event:

selectionchange( Ext.selection.Model this, Ext.data.Model[] selected, Object eOpts )

The view is not being passed in to the selectionchange handler. An easy way to handle this is to either use Ext.getCmp() or use refs as seen in the docs for Ext.app.Controller:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.app.Controller

Answer 4

//get grid

var grid = selectionModel.view.ownerCt.ownerCt;