码迷,mamicode.com
首页 > Web开发 > 详细

Extjs RowNumberer下一页动态增加

时间:2014-10-23 14:08:22      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:style   color   io   ar   使用   for   sp   数据   on   

使用RowNumberer,当跳到下一页时,还是从1还是计数。

实现了序号的自动增加。

 

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

 

Extjs RowNumberer下一页动态增加

标签:style   color   io   ar   使用   for   sp   数据   on   

原文地址:http://www.cnblogs.com/yll-sww/p/4045517.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!