您的位置:首页 > Web前端 > JavaScript

Ext js 4 简单实现分页查询

2014-01-10 12:41 267 查看
参考官方api文档写的分页,原来分页也可以这么简单,(ext-4.2.1.883):

1,前台页面:

ValuePanel = new Ext.grid.GridPanel({
// 下方参数值
title: '参数值',
split: true,
region: "south",
height: 300,
xtype: 'grid',
store: storeAnalysis,
columns: ValuePanelColumns,
dockedItems: [{
xtype: 'pagingtoolbar',
store: storeAnalysis,
dock: 'bottom',
emptyMsg: '没有数据',
displayInfo: true,
displayMsg: '当前显示{0}-{1}条记录 / 共{2}条记录 ',
beforePageText: '第',
afterPageText: '页/共{0}页'
}]
  });
// 每页显示记录数
var itemsPerPage = 10;
// 分页查询store
var storeAnalysis = new Ext.data.ArrayStore({
model: 'SelectFieldValueListModel',
pageSize: itemsPerPage,
proxy: {
type: 'ajax',
url: appPath + '/ExploredReserves/AddSelectFieldValueToGridPage',// 任意动态页面
reader: {
type: 'json',
root: 'items',
totalProperty: 'total'
}
}
});
function LoadStoreAnalysis() {
storeAnalysis.load({
params: {
start: 0,// 这里的参数名不能改,是ext定死的
limit: itemsPerPage
}
});
}

2 后台返回一个如下格式的json就行了

/// <summary>
///  分页刷新下方属性值列表
/// </summary>
public ActionResult AddSelectFieldValueToGridPage(int start, int limit)
{
List<AnalyzeFieldBase> listFieldDataPage=new List<AnalyzeFieldBase>();
for (int i = 0; i < m_listFieldData.Count; i++)
{
if (i >= start && i < start + limit)
{
listFieldDataPage.Add(m_listFieldData[i]);
}
}
string result = CommonFun.ConvertObjectToJson(listFieldDataPage);

result = "{\"success\": true,\"total\": " + m_listFieldData.Count + ",\"items\":" + result + "}";
return Content(result);
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  Ext4 Extjs 分页