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:
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.
Thnx for sharing this .. :)
ReplyDeleteYou are welcome..:) sorry for the late reply back after a long time..
ReplyDeleteExcellent solutions!, but still not work for me.
ReplyDeleteI 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
Hi,
DeleteSince 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.
It didn't work!
DeleteThis 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"
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.
DeleteI cannot exactly say whats wrong by looking at the above errors.