ExtJS的分页

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

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

示例代码：

declare @limit intdeclare @start int  select top (@limit) * from tb_BaseCustomerListwhere 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"}]}