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. 

6 comments:

  1. You are welcome..:) sorry for the late reply back after a long time..

    ReplyDelete
  2. Excellent solutions!, but still not work for me.
    I don't know how modify the MultiGroupingStore.js like you did.

    Could you post the correction you made to operate in Extjs 3, please.
    I'll be very grateful.

    Slaudos
    thanks

    ReplyDelete
    Replies
    1. Hi,
      Since I had Implemented this long time back, not very sure.
      However, you can try using the file at: https://drive.google.com/file/d/0B2VF7lHO4exAZHBUVDktTUdCS1E/edit?usp=sharing

      Incase it works, let me know.

      Delete
    2. It didn't work!
      This is the error in console:
      "Uncaught TypeError: Cannot read property 'addClass' of null ext-all-debug.js:47448
      Ext.grid.GridView.Ext.extend.processRows ext-all-debug.js:47448
      Ext.grid.GridView.Ext.extend.refresh ext-all-debug.js:48228
      Ext.grid.GridView.Ext.extend.onDataChange ext-all-debug.js:48456
      EXTUTIL.Event.fire ext-all-debug.js:310
      EXTUTIL.Observable.fireEvent ext-all-debug.js:54
      Ext.data.Store.Ext.extend.loadRecords ext-all-debug.js:24540
      Ext.extend.onRead ext-all-debug.js:25780
      (anonymous function) ext-all-debug.js:25744
      Ext.extend.handleResponse ext-all-debug.js:4646
      handleTransactionResponse ext-base-debug.js:1890
      checkResponse ext-base-debug.js:1938
      (anonymous function)"

      and when I click:
      "Uncaught TypeError: undefined is not a function ext-all-debug.js:5784
      escapeRe ext-all-debug.js:5784
      Ext.grid.GroupingView.Ext.extend.processEvent ext-all-debug.js:51787
      Ext.grid.GridPanel.Ext.extend.processEvent ext-all-debug.js:46460
      Ext.grid.GridPanel.Ext.extend.onMouseDown ext-all-debug.js:46470
      h ext-all-debug.js:5197
      Uncaught TypeError: undefined is not a function ext-all-debug.js:5784
      escapeRe ext-all-debug.js:5784
      Ext.grid.GroupingView.Ext.extend.processEvent ext-all-debug.js:51787
      Ext.grid.GridPanel.Ext.extend.processEvent ext-all-debug.js:46460
      Ext.grid.GridPanel.Ext.extend.onClick ext-all-debug.js:46465
      h"

      Delete
    3. Well not sure, might be a version problem. The ux shared might be for a different version and you are using a different version of EXTJs. In that case you might have to change the implementation of some methods.

      I cannot exactly say whats wrong by looking at the above errors.

      Delete