extjs grid 分页 java_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 myList = new List();

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' },

]

};