extjs grid 分页

在使用extjs创建带分页功能的 grid 如下：

１.创建一个模型

// 　创建算定义模型　模型名称 User
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['name', 'email', 'phone', 'birthDate']　// 加载指定的数据字段
});

２.　创建store 来存储模型，其中　myPageSize 是默认的页面初始大小，设定为　10

// 创建　store
var userStore = Ext.create('Ext.data.Store', {
model: 'User',  // 使用自定义模型
//fields: ['name', 'email', 'phone','birthDate'], // 添加此字段时，可删除 model 字段
autoLoad: false,
//id:'UserStoreID',
pageSize: myPageSize,
proxy: {　　 // proxy 字段从后台获取数据
type: 'ajax',
url: '/home/GetData',
reader: {
type: 'json',
root: 'data',
totalProperty: 'totalCount',
}
}
});

3. 创建分页控件方法一：

/* 在grid 底部添加分页控件，将组件添加到该面板中的组件或一系列组件。所停靠的项目可以停靠在面板的顶部、右边、左边或底部。这通常是用于像工具栏和标签栏： */
dockedItems: [ 　　
　　　　　　{
xtype: 'pagingtoolbar',
store: userStore,   //和　GridPanel 使用的　store 是相同的
dock: 'bottom',
displayInfo: true,
displayMsg: '显示第{0}条数据到{1}条数据,一共有{2}条',
emptyMsg: "没有记录"
}
]

　分页控件方法二：

　

bbar: new Ext.PagingToolbar({       //定义翻页控件
pageSize:myPageSize,           // 参数1：每页显示数
store: userStore,      // 数据源---非常重要
displayInfo:true,
displayMsg:'显示第{0}条数据到{1}条数据,一共有{2}条',
emptyMsg:'没有记录'
}),

在后台接收的方法具体代码如下（以下是　Ｃ#　mvc 控制器代码）

public JSONHelper GetData()
{

List<Users> myList = new List<Users>();
JSONHelper json = new JSONHelper();
json.success = true;
json.totlalCount = 50;
int num = 10;　　// 模拟生产记录数

// post 请求
//var pageSize = Request.Form["start"];
//var pageIndex = Request.Form["limit"];

// get 请求获取　前端发送到服务器的　页面号，页面大小
var pageIndex = Request.Params["start"]; // 当前请求页面号
var pageSize = Request.Params["limit"];　// 页面大小

// 读取数据
var model = userService.GetData(pageIndex, pageSize, null);
if (model != null)
{
foreach(var m in model)
{
json.AddItem("name", m.Name);
json.AddItem("phone", m.Phone);
json.AddItem("email", m.Email);
json.AddItem("birthDate", m.BirthDate);
json.ItemOk();
}
}
return json;
}

注意：　后台返回的格式一定是 json 格式，返回的　json 格式如下：

var userData = {
"success": true,
"totalCount": 12,
"users": [
{ "name": "Lisa", "email": "aa@aa.com", "phone": "111111111",birthdate:'1991-02-01' },
{ "name": "Bart", "email": "bb@bb.com", "phone": "222222",birthdate:'1991-02-02' },
]
};