ExtJS 4 - grid grouping expand/collpase only certain groups

Question

From the API there is a config flag that one can set to expand or collapse grid groupings when rendered.

Is there a way to only expand the first grouping and have all the others collapsed?

For example i have a store with up to three groupings and would like to always have the first grouping expanded and the others collapsed.

there does not seem to be an easy way from the API to be able to do this!

Answer 1

You have to program it! But it isn't difficult... Look at the official Sencha examples, there you find a grouping example!

You will have to do following:

 //Either this...       
groupingFeature.expand(groupName, true);

//or this...
groupingFeature.collapse(groupName, true);

You should place the commands in an afterrender event of the grid. Or you try the groupchange event from the store (I am not sure if it is called on the init-process)

For the grid it should look like this...

afterrender:( grid, eOpts ) {
    var groupingFeature = grid.getView().features[0];

    groupingFeature.expand(groupName, true);
    ...
}

Answer 2

user1934574's answer has a little problem. You should get the view of the grid and then get the features. The code should be :

afterrender:( grid, eOpts ) {
    var groupingFeature = grid.getView().features[0]; 

    groupingFeature.expand(groupName, true);
    ...
}