ExtJs Grid分页时序号自增的实现

核心提示：ExtJs Grid分页时，默认情况下每页的序号都是从1起始的，ExtJs Grid分页时序号自增的实现，这往往不符合我们的习惯，这里实现了序号的自动增加，是为了得到行号+分页变化时得到的start参数的值+1 的值，这样就能够正确得到序号结合分页的数据了，先看效果图：实现步骤如下：1、定义全局变量，var recor

ExtJs Grid分页时，默认情况下每页的序号都是从1起始的，这往往不符合我们的习惯。这里实现了序号的自动增加。

先看效果图：

实现步骤如下：

1、定义全局变量。

var record_start = 0;

2、Grid的columns部分的定义。

　columns　:　[new　Ext.grid.RowNumberer({
　　header　:　"序号",
　　width　:　40,
　　renderer:function(value,metadata,record,rowIndex){
　　　return　record_start　+　1　+　rowIndex;
　　}
　}),　{
　　header　:　"项目编号",
　　width　:　50,
　　sortable　:　false,
　　dataIndex　:　"projectNumber"
　},　{
　　header　:　"项目名称",
　　sortable　:　false,
　　dataIndex　:　"psName"
　},　{
　　header　:　"基站名",
　　sortable　:　false,
　　dataIndex　:　"psSiteName"
　}]

3、Grid 的PagingToolbar部分的定义。

　bbar　:　new　Ext.PagingToolbar({
　　store　:　grid_store,
　　pageSize　:　8,
　　displayInfo　:　true,
　　beforePageText:"第",
　　afterPageText:"/　{0}页",
　　firstText:"首页",
　　prevText:"上一页",
　　nextText:"下一页",
　　lastText:"尾页",
　　refreshText:"刷新",
　　displayMsg　:　"当前显示记录从　{0}　-　{1}　总　{2}　条记录",
　　emptyMsg　:　"没有相关记录!",
　　doLoad　:　function(start){
　　　record_start　=　start;
　　　　　　　　　　var　o　=　{},　pn　=　this.paramNames;
　　　　　　　　　　o[pn.start]　=　start;
　　　　　　　　　　o[pn.limit]　=　this.pageSize;
　　　　　　　　　　this.store.load({params:o});
　　　　　}
　})

说明：

1、全局变量record_start用于记录列表开始的数据点，如第一页，那么为0，如第二页，那么为8，这里分页pagesize设置为了8

2、分页中doLoad这部分的代码来自于Ext.PagingToolbar的doLoad方法，PagingToolbar在分页发生变化时会调用这个方法来重新load数据，只是多了个对全局变量进行赋值的步骤，为的就是在分页发生变化时，记录传递给Url的参数start的值。

3、在columns中实例化Ext.grid.RowNumberer时，重写了renderer方法，其实之所以这样做的原因，大家看一下 Ext.grid.RowNumberer源码中的renderer方法就知道了，就是根据行号+1来设置序号的，这里我们改这个方法，是为了得到行号+分页变化时得到的start参数的值+1 的值，这样就能够正确得到序号结合分页的数据了。

注意：

以上代码使用的是Ext2.x版本，如果你使用的是Ext3.x需要做以下的修改：

doLoad方法中把this.paramNames改为this.getParams()

　　doLoad　:　function(start){
　　　record_start　=　start;
　　　　　　　　　　var　o　=　{},　pn　=　this.getParams();
　　　　　　　　　　o[pn.start]　=　start;
　　　　　　　　　　o[pn.limit]　=　this.pageSize;
　　　　　　　　　　this.store.load({params:o});
　　　　　}