Ext JS grid with grouping expand one row on click

Question

I have an Ext JS grid that is using ftype: 'grouping' and groupHeaderTpl: ...' to create group rows. I want to make sure when a user clicks on a group row, that all other group rows are collapsed, and this group row is expanded.

According to this page, there is a groupclick event that I can subscribe to, and there are methods for collapseAll() and expand().

I have managed to subscribe to the groupclick event and successfully call the collapseAll() method. However, I cannot get the expand() method to work.

Here's the issue, the expand() method requires me to pass in groupName, and I don't know what that actually wants. Inside the groupclick event, I have access to a variable called group, but that variable is always undefined.

My Question: what is the groupName that the expand() method is asking for, and how do I access it from within the groupclick event? Does it need to be defined in the model or the grid somewhere that I'm not seeing?

Here is my controller code:

 onGroupClick: function (view, node, group, e, eOpts) {
            console.log(view);
            console.log(node);
            console.log(group) //this is always undefined

            view.features[0].collapseAll(); //works fine
            view.features[0].expand(groupName);  //what goes here for groupName???
        },

Answer 1

group variable holds group name. So code below should do the job:

groupclick: function (view, node, group, e, eOpts) {
    view.features[0].collapseAll(); 
    view.features[0].expand(group);
}

If your group variable is undefined, probably you have problem with grouping definition. In store you should have defined groupField which is name of field from Model (maybe that field is empty for records?).

Working sample: http://jsfiddle.net/CEJY5/