ExtJS:本地分页控件PagingStore

    要在一个页面上对同一个数据源用两种不同的方式进行展示：一种是曲线图，另一种是表格。绘制曲线图需要全量数据；而如果数据源记录数比较多，表格需要分页显示。对于这种需求，可对曲线图和表格这两个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事件，导致曲线图重绘；虽然全量数据没变，曲线也没变，但产生了这种多余的重绘动作。

转载于:https://www.cnblogs.com/csbird/archive/2010/05/30/1747179.html