0

我有一个包含商店的网格。由于某种原因,我无法对该网格中的行进行分组。

我的网格看起来像这样(无法上传图片,因为我没有足够的声誉):

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

我想按“用户名”列汇总结果。

包含商店的网格是:

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

任何人都可以帮助找出问题所在吗?

4

2 回答 2

0

好的。解决了问题!!

显然 ExtJS 也有 3.3.1 版的 api 文档——而我正在查看 4.0.0 api 的文档。

在 ExtJS 的第 3 版中,有一个叫做“GroupingStore”的东西,网格有“视图”,可以配置为支持 GroupingStore 中的 groupField。

将我的实现更改为这些组件会使魔术发生!

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

多么痛 :(

于 2014-03-03T14:24:47.243 回答
0

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

当我阅读 ExtJS api 文档时,这是这样写的:

groupField : String 用于对存储中的数据进行分组的字段。在内部,分组与排序非常相似——groupField 和 groupDir 作为第一个排序器注入(参见排序)。商店支持单一级别的分组,并且可以通过 getGroups 方法获取组。

可用时间:4.0.0

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

从 3.3.1 版迁移到 4 版有多难?

于 2014-03-03T12:47:40.280 回答