EXTJS表格GRIDPANEL分组显示信息

效果如下

后台传回来是许多存在相同信息的记录，前台显示的时候就需要过滤一下了，否则显得很乱，研究了许多表格分组显示以及合并单元格的而方法，还在论坛看了许多大佬给的js合并单元格方法，发现给GRID进行分组比较简单，由于extgrid元素好像是每行记录一个table，所以此方法不能实现效果，决定用分组。实现方法如下

首先后台得返回正确的json数据

[
		{"uid": 375,
		"Description": "SN2018120022 合格 AP14组装件",
		"BatchNumber": "OL201812060015",
		"MaterialQty": 1.0,
		"DeductBarCode": "OL201812060015",
		"_user": "280",
		"_ctime": "2018-12-06 16:15:15",
		"CodeNumber": "80100001"
	}, {"uid": 375,
		"Description": "SN2018120022 合格 AP14组装件",
		"BatchNumber": "OL201812060016",
		"MaterialQty": 1.0,
		"DeductBarCode": "OL201812060016",
		"_user": "280",
		"_ctime": "2018-12-06 16:15:15",
		"CodeNumber": "80100001"}
]

接下来，定义一个store

var SNStore = Ext.create('Ext.data.Store', {
                    id: 'SNStore',
                    //选择分组的字段
                    groupField: 'Description',
                    proxy: {
                        url: 'Handler.ashx?action=load',
                        type: 'ajax',
                        async: false,

                        simpleSortMode: true
                    },
                    //选择开始读取的根节点
                    reader: {
                        type: 'json',
                        root: 'datas'
                    },
                    fields: [
                         'Description','BatchNumber', 'MaterialQty', 'DeductBarCode', '_user', '_ctime']
                });

再定义一个gridpanel

var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
				//下面设置name就默认显示分组的字段
                    groupHeaderTpl: '{name}', //print the number of items in the group
                    Collapsed: false // start all groups collapsed
                });
var SNBatch = Ext.create('Ext.grid.Panel',
                        {
                            id: 'SNBatch',
                            title: 'SN及批次信息',
                            store: Ext.data.StoreManager.lookup('SNStore'),
                            features: [groupingFeature],
                            columns: [
                                { name: 'txtSN', width: 280, text: 'SN信息', dataIndex: '' },
                                { name: 'txtQty', width: 100, text: '数量', dataIndex: 'MaterialQty' },
                                { name: 'txtBarcode', width: 150, text: '条码', dataIndex: 'DeductBarCode' },
                                { name: 'txtBuckleSN', width: 150, text: '扣料批次', dataIndex: 'BatchNumber' },
                                { name: 'txtCollectionPerson', width: 100, text: '采集人员', dataIndex: '_user' },
                                { name: 'txtCollectionTime', width: 180, text: '采集时间', dataIndex: '_ctime'}
                            ]
                        });

如果需要把grid的分组结果进行收起，可在加载完后调用方法

var colla = function () {
                    Ext.getCmp("SNBatch").getView().features[0].collapseAll();
                }

最后把grid载入viewport就可以实现了。
貌似grid还有另一种subtable方法实现，效果更美观，会在后面更新使用方法。
先剧透一下，给大家瞧一瞧官方给的例子的实现效果