ExtJS -分组网格结果

Question

我有个储藏室。由于某些原因，我无法对网格中的行进行分组。

我的网格看起来像这样(因为我没有足够的声誉，所以不能上传图片)：

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

我想通过'userName‘列来聚合结果。

包含存储的网格是：

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, {}); 

我用的商店是：

// 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
    };
}
});

有人能帮忙找出问题出在哪里吗？

Answer 1

好的。解决了问题！！

显然，ExtJS也有一个3.3.1版本的api文档--当我查看4.0.0API的文档时。

在ExtJS的第三个版本中，有一个叫做" GroupingStore“的东西，网格有”视图“，可以配置它来支持GroupingStore中的groupField。

将我的实现更改为那些组件，这将使神奇的事情发生！

但为什么？为什么？为什么sencha开发人员在一个版本到另一个版本之间做出如此巨大的更改？？

如此多的痛苦：

Answer 2

我注意到编写UI的ExtJS版本是3.3.1。

当我阅读ExtJS api文档时，所写的内容如下：

groupField :将存储中的数据分组的字段字符串。在内部，分组非常类似于排序-- groupField和groupDir被注入为第一个排序器(参见排序)。存储支持单一级别的分组，并且可以通过getGroups方法获取组。 提供日期: 4.0.0

这意味着分组在我的ExtJS版本中不可用？

从3.3.1版到4版有多难？