Extjs中实现分页

目前接触到的有两种方法，主要区别在后台程序，界面上都是一样的写法，

首先创建数据集dataStore

// Model
Ext.define('data.model.IndexStaff', {
extend:'Ext.data.Model',
fields:[
{name:'id', mapping:'id'},
{name:'name', mapping:'name'}

]

});
// Proxy
Ext.define('data.proxy.IndexStaff', {
extend:'Ext.data.proxy.Ajax',
url:http://localhost:8080/getdata.jsp

model:'data.model.IndexStaff',
method:'POST',
reader:{
type:'xml',
record:'data',
totalRecords:'@total',//获得数据总条数标签
}
});
// Store
Ext.define('data.store.IndexStaff', {
extend:'Ext.data.Store',
pageSize: 30,//设置每页显示数据条数
model:'data.model.IndexStaff'
});

var gridStore = new data.store.IndexStaff();

首先在创建GridPanel

Ext.create('Data.grid.Panel',{

extends:"Ext.grid.panel",

id: 'GridPanel',
region: 'center',
trackOver: false,
store:gridStore, // 数据集
stripeRows:true,
autoScroll:true,
columns: [
//测试用的
{header: "id", width: 80, dataIndex: 'id'},
{header:'name', dataIndex:'name', width: 150}

],

//分页栏
dockedItems:[
{xtype:'pagingtoolbar', store:perDataStore, dock:'bottom', displayInfo:true,displayMsg: '显示 {0} - {1} 条，共计 {2} 条',emptyMsg: "没有数据"}
]
});

me.callParent(arguments);
}
});

在界面请求数据时会传递limit职位store中的pageSize,和start即grid中分页的页面标号，从0开始。

在后台控制语句中传出需要请求数据的条数，根据start和limit判断，数据总跳数为total如果start*limit+limit小于数据总条数则取数据应从start*limit到start*limit-1取值，如果start*limit+limit大于数据总条数则从start*limit到total之间取值。需要注意的是，后台返回给页面的数据项中需包含<total>total<total>数据项，标签中的total名不是固定的只要和proxy中totalRecords:'@total',@后的标签名一样即可。

再说服务器取值，服务器取值最好一次性取得所有数据的条数，并将数据缓存在客户端，这样就不用每次分页时都去服务器取值。

以上仅供参考，主要是思路，代码应该需要进一步修改，欢迎大家指正。