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

【www.bbyears.com--extjs】

 代码如下

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

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

最后我们看看展示效果：

本文来源：http://www.bbyears.com/wangyezhizuo/33097.html