ExtJS - 分组网格结果

我有一个包含商店的网格。由于某种原因，我无法将网格中的行分组。ExtJS - 分组网格结果

我的网格看起来是这样的（不能上传图片，因为我没有足够的声誉）：

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

能

搞清楚是什么问题任何人的帮助？

来源

2014-03-02 yanivsh

你在控制台上得到任何错误？ – lascort

NOP。经过它贴到这里之前，我注意到，虽然该财产“groupField”不作为商店的性质研究的一部分。我的意思是，当我使用Chrome进行调试时，如果我在看商店，我可以看到属性：successProperty，totalProperty等，但不是我配置的groupField。 – yanivsh

好的。解决了问题！

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

在第三版的ExtJS中有一种叫做“GroupingStore”的东西，网格有“view”可以配置为支持GroupingStore中的groupField。

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

但为什么？为什么？？？为什么sencha开发者在一个版本之间做出如此巨大的改变？

这么多的痛苦:(

来源

2014-03-03 14:24:47 yanivsh

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

当我在读ExtJS的API文档此写着什么：

groupField：字符串通过在存储组数据的字段。在内部，分组非常类似于排序 - groupField和groupDir是作为第一个分类器注入的（请参见sort）。商店支持单一级别的分组，并且可以通过getGroups方法获取组。

可用，因为：4.0.0

这意味着分组功能只在我的版本的ExtJS的？

从版本3.3.1到版本4有多难？

来源

2014-03-03 12:47:40 yanivsh

ExtJS - 分组网格结果

回答

相关问题