要在一个页面上对同一个数据源用两种不同的方式进行展示:一种是曲线图,另一种是表格。绘制曲线图需要全量数据;而如果数据源记录数比较多,表格需要分页显示。对于这种需求,可对曲线图和表格这两个UI控件分别配置store,一个去服务端端取全量数据,一个则分页取数据(Extjs自带的store支持服务器端分页)。虽然能解决问题,但有个缺点:表格每次翻页都要和服务器端进行一次交互。实际上,绘制曲线图时全量数据已经取到本地来了,直接在它基础上分页即可。扩展控件Ext.ux.data.PagingStore可实现对本地数据进行分页。

 

代码
//表格数据源。本地分页。
var gridStore = new Ext.ux.data.JsonPagingStore({
fields: [
{name:
'date', mapping: 0},
{name:
'usernum', mapping: 1, type: 'int'},
{name:
'clicknum', mapping: 2, type: 'int'}
],
lastOptions: {params: {start:
0, limit: 10}}
});

//曲线图的数据源。全量数据
var store = new Ext.data.Store({
proxy:
new Ext.data.HttpProxy({
url: queryAll
method:
'GET'
}),
root:
'data',
reader:
new Ext.data.JsonReader({
root:
'data',
fields: [
{name:
'date', mapping: 0},
{name:
'usernum', mapping: 1, type: 'int'},
{name:
'clicknum', mapping: 2, type: 'int'}
]
}),
listeners:{
load:
function(mystore, r){
if(r.length == 0)
return;

//这里简单地把所有数据加载到gridStore进行分页。
//某些情况下需要对原始数据进行处理,可以构造一个临时数组 tempArray,然后再导入gridStore.loadData(tempArray);
gridStore.loadData(mystore.reader.jsonData.data);
}

}
});

最后把表格控件的分页工具栏的数据源配置为gridStore即可。

      实际上仅使用一个allDataStore也是可以的,即把allDataStore改用PagingStore来实现。

 

代码
var store = new Ext.ux.data.JsonPagingStore({
proxy:
new Ext.data.HttpProxy({
url: queryAll
method:
'GET'
}),
//设置分页
lastOptions: {params: {start: 0, limit: 10}},

//注意:这里不用配置reader属性了
//因为JsonPagingStore就是用JsonReader实现的
//只需配置JsonReader需要的属性root,fields等
root: 'data',
fields: [
{name:
'date', mapping: 0},
{name:
'usernum', mapping: 1, type: 'int'},
{name:
'clicknum', mapping: 2, type: 'int'}
]

/****
reader: new Ext.data.JsonReader({
root: 'data',
fields: [
{name: 'date', mapping: 0},
{name: 'usernum', mapping: 1, type: 'int'},
{name: 'clicknum', mapping: 2, type: 'int'}
]
})
****
*/
});

 

需要注意的是,遍历全量数据时不能采用allDataStore.getAt(index)这样的方式;因为数据已被分页,这样只能取到当前页的数据。正确的方式是

var ds=allDataStore.reader.jsonData.data;
for(var i=0;i < ds.length; ++i)
// x = ds[i][0]; 第一个字段的值
// y = ds[i][1]; 第二个字段的值

这样曲线图和表格可以共用一个store。不过由于我使用的曲线图控件在数据源更新时,会自动重绘图形。也就是说如果采用这种方式,共用一个store,当对表格数据进行翻页时,会触发store的load事件,导致曲线图重绘;虽然全量数据没变,曲线也没变,但产生了这种多余的重绘动作。

posted on 2010-05-30 17:15  csbird  阅读(4976)  评论(0编辑  收藏  举报