Ext.grid分组实现
Ext中的例子中有Ext.grid.dummyData，在本例中将Ext.grid.dummyData转换为动态获取数据。
Ext.grid.dummyData其实就是一个ArrayStore，具体实现见红色部分
var reader = [
{name: 'sceneName',mapping: 'sceneName'},
{name: 'deviceName',mapping: 'deviceName'},
{name: 'dataId',mapping: 'dataId'},
{name: 'dataName',mapping: 'dataName'},
{name: 'dataValue',mapping: 'dataValue'},
{name: 'createTime',mapping: 'createTime'}
];
var ds = new Ext.data.GroupingStore({
autoLoad: true,
proxy: new Ext.data.HttpProxy({ url: projectPath + '/iot/listDataOfToday.do' }),
reader: new Ext.data.ArrayReader({totalProperty: 'totalProperty', root: 'root'}, reader),
baseParams: { limit: limit },
sortInfo:{field: 'dataName', direction: "ASC"},
groupField:'sceneName'
});
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(), {
id: 'dataId', dataIndex: 'dataId',header: 'Id', hidden:true
}, {
id: 'dataName', dataIndex: 'dataName',header: '数据名称', align: 'left',sortable: true
}, {
id: 'dataValue', dataIndex: 'dataValue',header: '数据值',width: 100, align: 'left',sortable: true
}, {
id: 'createTime', dataIndex: 'createTime',header: '采集时间',width: 150, align: 'left',sortable: true
}, {
id: 'sceneName', dataIndex: 'sceneName',header: '场景名称',width: 120, align: 'left',sortable: true
}, {
id: 'deviceName', dataIndex: 'deviceName',header: '设备名称',width: 120, align: 'left',sortable: true
}
]);
var grid = new Ext.grid.GridPanel({
id: 'grid-todayData',
store: ds, cm: cm, sm: new Ext.grid.RowSelectionModel(),
region:'center', split:true, stripeRows: true,
view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),
autoExpandColumn: 'dataName',
columnLines: true, loadMask: { msg: '正在加载数据，请稍侯……' },
tbar: ['->', '查询：',
new Ext.app.SearchField({
paramName: 'queryValue',id: 'queryValue',store: ds,width: 200, emptyText: '请输入数据名称'
})
],
bbar: new MyPagingToolbar({
pageSize: limit,store: ds,displayInfo: true,
displayMsg: '当前 {0} - {1}条 /共 {2}条',emptyMsg: '没有可显示的记录'
})
});