extjs4中Ext.toolbar.Paging分页工具栏控件

时间：2022-06-25 18:30:10 编辑：袖梨来源：一聚教程网

代码如下	复制代码
[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控件，把它放置到一个面板中，面板的代码如下：

代码如下

复制代码

[Js]
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中Ext.toolbar.Paging分页工具栏控件

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程