[Js]
var store = Ext.create("Ext.data.Store", {
fields: ["IntData", "StringData", "TimeData"],
pageSize: 15,
proxy: {
type: "ajax",
url: "PagingToolbar1Json",
reader: {
type: "json",
root: "rows",
totalProperty: "results"
}
},
autoLoad: true
});
对应的服务端mvc的代码如下:
[C# Mvc]
public JsonResult PagingToolbar1Json(int start, int limit)
{
var json = new
{
results = BasicData.Table.Count,
rows = BasicData.Table.Skip(start).Take(limit).Select(x => new
{
IntData = x.IntData,
StringData = x.StringData,
TimeData = x.TimeData.ToShortDateString()
})
};
return Json(json, JsonRequestBehavior.AllowGet);
}
现在我们借用上篇的Ext.view.View控件,把它放置到一个面板中,面板的代码如下:
var panel = Ext.create("Ext.Panel", {
renderTo: "div1",
frame: true,
width: 535,
autoHeight: true,
collapsible: true,
layout: "fit",
title: "分页控件用在View",
items: Ext.create("Ext.view.View", {
store: store,
tpl: tpl,
autoHeight: true,
multiSelect: true,
id: "view1",
overItemCls: "hover",
itemSelector: "tr.data",
emptyText: "没有数据",
plugins: [
Ext.create("Ext.ux.DataView.DragSelector", {}),
Ext.create("Ext.ux.DataView.LabelEditor", { dataIndex: "IntData" })
]
}),
bbar: Ext.create("Ext.toolbar.Paging", {
store: store,
displayInfo: true,
items: [
"-", {
text: "第10页",
handler: function () {
store.loadPage(10);
}
}]
})
});
注意上述代码,我们在分页工具栏控件中加入了一个按钮,当单击这个按钮时,数据集自动翻到第十页。
最后我们看看展示效果:
[extjs4.2]extjs4中Ext.toolbar.Paging分页工具栏控件
http://m.bbyears.com/wangyezhizuo/33097.html
推荐访问:extjs4api