ExtJS - grouping grid results

Question

I have a grid containing store. I'm not able to group the rows in that grid for some reason.

my grid looks something like this (can't upload a picture since i don't have enough reputation):

+-------------+---------------+--------------+---------+
| userName    | sipUserName   | osIdentifier | ...     |
+-------------+---------------+--------------+---------+
|           1 | 1             | 123456       |       1 |
|           1 | 2             | 654321       |       1 |
|           3 | 3             | 654321       |       2 |
|           4 | 4             | 654321       |       1 |
+-------------+---------------+--------------+---------+

And i want to aggregate the results by the 'userName' column.

The grid contains the store is:

UsersGrid = function(config) {

var serviceName = 'getSystemInfo?groupName=';
serviceName+=groupName;


this.store = new RestStore({serviceName: serviceName, fields:[
    'userName', 
    'sipUserName',
    'osIdentifier',
    'majorVersion',
    'minorVersion',
    'patchVersion',
    'platformIdentifier'
] ,  groupField : 'userName'
});


this.store.on('beforeload', function(store, options){
    var params = Ext.getCmp('UsersPanel').getParams();
    store.baseParams=params;
}, this);


UsersGrid.superclass.constructor.call(this, {
    selModel:new Ext.grid.RowSelectionModel({singleSelect:true}),
    features: [
       {
        ftype: 'grouping',
        groupHeaderTpl: [
          'ss'
        ],
        hideGroupedHeader: true,
        startCollapsed: false
       }
    ],

    columns:[
         {header:'User Name', dataIndex:'userName', width:100, sortable:true}
        ,{header:'Sip User Name', dataIndex:'sipUserName', width:100, sortable:true}
        ,{header:'Os Identifier', dataIndex:'osIdentifier', width:100, sortable:true}
        ,{header:'Major Version', dataIndex:'majorVersion', width:100, sortable:true }
        ,{header:'Minor Version', dataIndex:'minorVersion', width:100, sortable:true }
        ,{header:'Patch Version', dataIndex:'patchVersion', width:100, sortable:true }
        ,{header:'Platform', dataIndex:'platformIdentifier', width:100, sortable:true }
    ],

    bbar:new Ext.PagingToolbar({store:this.store, pageSize:50, displayInfo:true})
});
Ext.apply(this, config);

this.store.paging = this.getBottomToolbar();

};
Ext.extend(UsersGrid, Ext.grid.GridPanel, {}); 

The store I'm using is:

// default REST store
RestStore = function(cfg) {
var url = cfg.url || apiUrl;
var idProperty = cfg.idProperty || 'id';
if (!cfg.url && cfg.serviceName) url=url+cfg.serviceName;
var groupField = cfg.groupField;

RestStore.superclass.constructor.call(this, {
    restful:true,
    proxy: new Ext.data.HttpProxy({
        url:url,
        listeners: {
            beforewrite:function(writer,action,rs,params){
                params.jsonData=params.jsonData.entities;
            },
            beforeload: {scope:this, fn:function(ds, params){
                var webQuery={};
                var page=1;  if (params.start) page = Math.ceil(params.start / params.limit);

                if (this.paging) {
                    webQuery.numberOrItemsPerRequest = this.paging.pageSize;
                    webQuery.requestNumber = page;
                }

                webQuery.likeCriterions = params.likeCriterions;
                webQuery.simpleCriterions = params.simpleCriterions;
                webQuery.simpleDateCriterions = params.simpleDateCriterions;
                webQuery.inCriterions = params.inCriterions;
                webQuery.orders = params.orders;


                if (!isEmpty(webQuery)) params.webQuery=webQuery;
            }}
        }
        ,api:{
            read:{url:url}

        }

    }),
    reader: new Ext.data.JsonReader(
        {totalProperty:'filter.totalEntities', root:'entities', idProperty:idProperty, messageProperty:'message', successProperty:'success', groupField:groupField},
        cfg.fields
    )
    ,writer: new Ext.data.JsonWriter({encode:true, writeAllFields:true})
    ,listeners: {
        exception: function(proxy, type, action, op, res){
            var d={};
            if (!res.message && res.responseText) { d=Ext.decode(res.responseText); res.message=d.errorMessage; }
            Ext.Msg.show({title:'Error'+(d.errorCode?' #'+d.errorCode:''), msg:(res.message||'error'), icon:Ext.MessageBox.ERROR, buttons:Ext.Msg.OK, minWidth:600});
        },
        load:function(ds, rec, op){ // set totalLength
            if (ds.reader.jsonData.filter && ds.reader.jsonData.filter.totalEntities) ds.totalLength = ds.reader.jsonData.filter.totalEntities;
        }
    }
});
};
Ext.extend(RestStore, Ext.data.Store);


Ext.override(Ext.data.JsonReader,{

readRecords : function(o){
    this.jsonData = o;
    if(o.metaData) this.onMetaChange(o.metaData);

    var s = this.meta, Record = this.recordType, f = Record.prototype.fields, fi = f.items, fl = f.length, v;

    if(s.successProperty){
        v = this.getSuccess(o);
        if(v === false || v === 'false') success = false;
    }

    if(s.totalProperty){
        v = parseInt(this.getTotal(o), 10);
        if(!isNaN(v)) totalRecords = v;
    }

    if(s.groupField){
        groupField = s.groupField;
    }

    var root = this.getRoot(o);
    if (!root) { // no records returned
        return {success:success, records:[], totalRecords:0, message:o.message};
    }
    var c = root.length, totalRecords = c, success = true;

    return {
        success : success,
        records : this.extractData(root, true), 
        totalRecords : totalRecords,
        groupField : groupField,
        remoteGroup : true
    };
}
});

Can anyone help in figuring out what is the problem?

Answer 1

OK. Solved the problem!!

Apparently ExtJS has an api documentation also for version 3.3.1 - while I was looking on the documentation of the 4.0.0 api.

In the 3rd version of ExtJS there is something called "GroupingStore" and the grid has "view" which can be configured to support the groupField in the GroupingStore.

Changing my implementation to those components make the magic happen!

But WHY???? WHY??? why sencha developers makes such huge changes between one version to another??

So much pain :(

Answer 2

I've noticed that the version of the ExtJS in which the UI is written is 3.3.1.

When I was reading the ExtJS api documentation this what was written:

groupField : String The field by which to group data in the store. Internally, grouping is very similar to sorting - the groupField and groupDir are injected as the first sorter (see sort). Stores support a single level of grouping, and groups can be fetched via the getGroups method.

Available since: 4.0.0

This means that grouping is not available in my version of ExtJS?

How hard is to move from version 3.3.1 to 4?