一聚教程网:一个值得你收藏的教程网站

热门教程

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);
                    }
                }]
        })
    });


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

最后我们看看展示效果:

热门栏目