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

作者：袖梨 2022-06-25

代码如下	复制代码
[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);
                    }
                }]
        })
    });

注意上述代码，我们在分页工具栏控件中加入了一个按钮，当单击这个按钮时，数据集自动翻到第十页。

最后我们看看展示效果：