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"
　 }]

 

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 的值，这样就能够正确得到序号结合分页的数据了。