Grid要实现分页，首先要向后台action传值，Ext 分页时主要向后台传值有3个：limit,page和start，
limit：每页显示记录条数；page:第几页（从1开始）；start：每页第一条记录的序号（从0开始，例如：第一页的第一条记录序号为0）。
首先定义一个Model类：
|
1
2
3
4
5
6
7
8
9
|
Ext.onReady(function(){
Ext.define(‘Student‘, {
extend: ‘Ext.data.Model‘,
fields: [
{name: ‘id‘,type: ‘int‘},
{name: ‘username‘, type: ‘string‘},
{name: ‘age‘, type: ‘string‘}
]
});
|
定义并实例化一个Store类，调用后台action取数据
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
var
getLocalStore = Ext.create(‘Ext.data.ArrayStore‘, {
model: ‘Student‘,
pageSize: 10,
autoLoad: {start: 0, limit: 10},
proxy : {
type : ‘ajax‘,
url : ‘list.action‘,//获取数据的url
method : ‘POST‘,
reader : {
type : ‘json‘,
root : ‘datas‘,
totalProperty : ‘total‘
}
}
});
|
注意：reader : {
type : ‘json‘,
root :
‘datas‘,
totalProperty :
‘total‘
}
其中 type:‘json‘表示从后台取到的数据类型为json类型的；root:‘datas‘表示表单中具体要现实的记录（字符串表示的值要与action中List相对应）；totalProperty：‘total‘表示总的记录数。
然后就是创建Grid
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
var
grid = Ext.create(‘Ext.grid.Panel‘, {
store: getLocalStore,
columns: [
Ext.create(‘Ext.grid.RowNumberer‘),
{text: "ID", flex: 1, sortable: true, dataIndex: ‘id‘},
{text: "Name", width: 200, sortable: true, dataIndex: ‘username‘},
{text: "Age", width: 200, sortable: true, dataIndex: ‘age‘}
],
columnLines: true,
width:600,
height:300,
selType: ‘checkboxmodel‘,
frame: true,
title:‘Grid with Numbered Rows‘,
iconCls:‘icon-grid‘,
margin: ‘0 0 20 0‘,
dockedItems: [{
xtype: ‘pagingtoolbar‘,
store: getLocalStore,
dock: ‘bottom‘,
displayInfo: true
}],
renderTo: Ext.getBody()
});
|
Ext.create(‘Ext.grid.RowNumberer‘)显示行号。
注意：这里需要两次使用到getLocalStore，也就是上面的Store类。
分页部分dockedItems:
[{
xtype:
‘pagingtoolbar‘,
store: getLocalStore,
dock:
‘bottom‘,
displayInfo: true
}],也要使用。