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: '没有可显示的记录'
         })
     });