ExtJs grouping condition

Question

The following code takes a data store that is designed to hold windows registry keys in a flat view (I didn't want a tree view).

The column of the keys is used for grouping and all the values under that key can be viewed once the key is expanded. The values are colored according to a scoring that the get (external), the score is stored in the "result" field.

My problem

I want the key to be collapsed only if all of its values have a score greater than 0.0, otherwise the key must be expanded.

How/Where do I implement the logic that iters over the groups and decides if it will be collapsed/expanded ?

Thanks!

Ext.onReady (function () {
var store = Ext.create('Ext.data.Store', {
    storeId:'registryStore',
    // model
    fields:['result', 'key', 'type','value','data'],
    // enable grouping for the data Store
    groupField: 'key',
    // the data itself in JSON format
    data: {'regkeys':[.....data...]},
    // define the JSON data type
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'regkeys'
        }
    }
});

// grouping
var grouping = Ext.create('Ext.grid.feature.Grouping',{
    startCollapsed: true,
});

var regPanel = Ext.create('Ext.grid.Panel', {
    title: 'Registry',
    renderTo: Ext.getBody(),
    // link to grouping object
    features: [grouping],
    store: Ext.data.StoreManager.lookup('registryStore'),
    // model
    columns: [
        { header: 'Result', dataIndex: 'result'},
        { header: 'Type', dataIndex: 'type' },
        { header: 'Value', dataIndex: 'value', width:250,felx:1},
        { header: 'Data', dataIndex: 'data', flex:1}
    ],
    // color's each row according to score
    viewConfig: {
        getRowClass: function(record, rowIndex, rowParams, store) {
            if (record.get("result") == 0.0) { //  orange background
                return 'row-unknown';
            }
            else if (record.get("result") < 0.0) { // red background
                return 'row-bad';
            }
            return 'row-good'; // green background
        }
    }, 
    // collapse/expand all botton
    tbar: [{
                text: 'collapse all',
                handler: function (btn) {        
                    grouping.collapseAll();
                }
            },{
                text: 'expand all',
                handler: function (btn) {        
                    grouping.expandAll();
                }
            }],
    }); //Ext.create
}); //Ext.onReady

Answer 1

I found the answer, it's very hackish because ExtJS doesn't enable editing the grouped states before the grid renders them, therefore we need to render after the grid process it. I added the following code in the Ext.Grid.Panel's code:

        listeners: {
     'afterrender' : function(grid) {
       setTimeout(function(){
        var groups = store.getGroups();
        var gLen = groups.length;
        for (i = 0; i < gLen; i++) {
          // expand the group if at least one childs result <= 0.0
          for (j = 0; j < groups[i].children.length; j++ ){
            if (groups[i].children[j].data["result"] <= 0.0) {
              //console.log(groups[i].name);
              grouping.expand(groups[i].name, false);
              break; // no need to continue checking.
            }
          }
        }
       });
      }
    },//listeners

Hope that helps..