ExtJS的分页

ExtJS的分页其实是和其他的分页一样的。

首先我们在数据库中使用sql语句先进行一定的分页操作。

示例代码：

declare @limit int
declare @start int  
select top (@limit) * from tb_BaseCustomerList
where CusID not in (
	select top (@start) CusID from tb_BaseCustomerList
     )

这里我们在后台写好分页之后，则需要将ExtJS中的start和limit两个参数传递进去。

首先看一下前台页面上的ExtJS是怎么在Grid表格中添加分页控件的。

示例代码：

 var CustlistGrid = Ext.create("Ext.grid.Panel", {
        id: "CustlistGrid",
        store: storeCustGrid,
        columns: [{
            text: "序号",
            xtype: "rownumberer",
            width: 100,
            align: "center",
            locked: true
        }, {
            text: "客户全称",
            width: 230,
            align: "center",
            dataIndex: "CusFullName",
            locked: true
        }, {
            text: "状态",
            width: 100,
            dataIndex: "CusState",
            align: "center"
        }, {
            text: "公司地址",
            width: 230,
            dataIndex: "CompanyAddress",
            align: "center"
        }],
        dockedItems: [{
            xtype: "pagingtoolbar",
            store: storeCustGrid,
            dock: "bottom",
            displayInfo: true
        }]
    });

在这里我们有必要解释一下dockedItems中的各项配置的作用：

xtype--配置了此项为分页控件。样式如下图所示：

里面包含了各类与分页相关的信息。

store--此配置项是一个数据源（同表格绑定的store是同一个数据源）

dock--是指停靠位置。

displayInfo--是否显示下图中画红色圈内的信息。

这里我们介绍了如何将分页控件显示在Grid表中。接下来就是数据源的配置了

示例代码：

function CreateCustlistStore() {
    var itemsPerPage = 2;
    var custlistStore = Ext.create("Ext.data.Store", {
        autoLoad: { start: 0, limit: itemsPerPage },
        storeId: "storeCustGrid",
        model: "CustGridModel",
        pageSize: itemsPerPage,
        proxy: {
            type: "ajax",
            url: "GetCustlist",
            reader: {
                type: "json",
                root: "rows",
                totalProperty: "totals",
            }
        }
    });
    return custlistStore;
}

首先我们来介绍一下分页中两个重点配置项：start和limit

start代表的是要显示的页码上面的第一个条目在总条目中的index（也就是排第几个，起始是0），例如：当store第一次load的时候，start=0，limit=10，当点击翻页的时候store进行load，此时start=start+limit，那么第二也start=10.

而limit就是每页要显示的条目数量。

这里需要注意的是start和limit是第一请求时向后台传递的数据。如果你不赋值，则在第一次请求时后台取到的start和limit均为null

当所有的配置都完成之后。我们还需要注意这里从后台传递过来的JSON格式数据不能是数组。也就是说不能是这种格式的

[{"totals":30},"rows":[{"name","xiaocainiao"},{"age":"20"}]}]

而是需要将最外围的中括号（[]）给去掉。写成这样的形式：

{"totals":30},"rows":[{"name","xiaocainiao"},{"age":"20"}]}