Thursday, December 1, 2011

Multi-level Grouping

Extjs 3 has support for a first level/single level of grouping.
However, as multi-sort there may be a need to have multi-level grouping.
The following extension at http://jaffa.sourceforge.net/JaffaRIATests/tests/extjs/multigroup/MultiGroup.html has a good implementation of the same.

When I tried using the same in one of my projects, I noticed that the extension does not actually support multi-sort. It has overridden the sort function of the GroupingStore/store which supported multi-sort.
I modified the code to remove the overridaen sort logic from MultiGroupingStore   and it did work. The only function that needs to be overridden was groupBy. Will soon post the code and additional details for the same. Else you can try it yourself and it will be a good exercise to learn... :P..

Another problem with the extension is, the groups do not expand/collapse properly.
The reason for this is it may be the data that is causing it, since if 2 different groups have the same sub-group they might get the same id's which may cause the collapsed group style to work incorrectly.

The fix for this is (Though it may not be that optimized and the only fix..):

1. We will use an additional counter which will help us generate unique id's:
// init counter
 var cn = 0;  // ADD NEW VARIABLE
        for (var i = 0, len = rs.length; i < len; i++) {
            added = 0;
            var rowIndex = startRow + i;
            var r = rs[i];
            var differ = 0;
            var gvalue = [];
            var fieldName;
            var fieldLabel;
            var grpFieldNames = [];
            var grpFieldLabels = [];
            var v;
            var changed = 0;
            var addGroup = [];
     cn = cn + 1; //inc counter
2. Then while generating the group id, we can use it like this: 

gid = gidPrefix + '-gp'+cn+'-' + gp.dataIndex + '-' +
                    Ext.util.Format.htmlEncode(gp.value); 
3. Now, while getting the group/rows the regular 
expression needs to be modified:
   getRowsFromGroup: function(r, gs, lsField){
        var rx = new RegExp(".*-gp.*-"+lsField+"-.*
");
That's it.. Well EXTJS 4 now has a support for Multi-Grouping.