首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

Ext.grid分组兑现

2012-09-16 
Ext.grid分组实现Ext中的例子中有Ext.grid.dummyData,在本例中将Ext.grid.dummyData转换为动态获取数据。Ex

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

热点排行