Groupped grid collapse groups on group click

Question

I have a groupped grid. All the items are collapsed at the start. I want to achieve the functionallity that only one group can be expanded at once. My idea was the following: On group click collapse all the groups and expand the clicked group again. But I am stuck at the first part (collapsing all the groups). I get the following error in browser console:

Error:

Uncaught TypeError: Cannot call method 'onRefresh' of undefined .... Grouping.js

Code:

 onGroupingGroupclick()view, node, group, eOpts){
       view.collapseAll(); //error
    }

If my approach is not ok for some reason I would kindly ask for any alternatives...

Answer 1

view variable in your groupclick event listener contain instance of Ext.view.Table. But you have to call collapseAll() method on instance of Ext.grid.feature.Grouping feature which you use in your grid for grouping.

So your grid config should be like this:

features: [{
    ftype:'grouping',
    startCollapsed: true       
}],    
listeners: {
    groupclick: function (view, node, group, e, eOpts) {

        view.features[0].collapseAll();
        view.features[0].expand(group);
    }
}

See live example in this fiddle: https://fiddle.sencha.com/#fiddle/2f8