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

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