序号结合分页功能的实现

序号结合分页显示：
一、效果图：

 

二、相关js脚本：
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的分页部分：
 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});
     }
 })
三、解析js:
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 的值，这样就能够正确得到序号结合分页的数据了。

评论

9 楼 bcw104 2009-05-22  

bcw104 写道

引用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});     } }请问一下有这个属性吗?这是哪个版本的ext?

这个是我从ext3.0的api里面找的.
2.X不知道有没有,应该也是有的

8 楼 javaheqiang 2009-05-19  

学习学习学习学习。

7 楼 bcw104 2009-05-19  

又翻了一下,

// private
    doLoad : function(start){
        var o = {}, pn = this.paramNames;
        o[pn.start] = start;
        o[pn.limit] = this.pageSize;
        if(this.fireEvent('beforechange', this, o) !== false){
            this.store.load({params:o});
        }
    },

可能是这段吧,受教了.

6 楼 bcw104 2009-05-19  

看了一下ext3.0的源代码,pagetoolbar里面有下面的内容,不过这个方法是私有的,而且第一个参数是store:

// private
    onLoad : function(store, r, o){
        if(!this.rendered){
            this.dsLoaded = [store, r, o];
            return;
        }
        this.cursor = (o.params && o.params[this.paramNames.start]) ? o.params[this.paramNames.start] : 0;
        var d = this.getPageData(), ap = d.activePage, ps = d.pages;

        this.afterTextItem.setText(String.format(this.afterPageText, d.pages));
        this.field.value = ap;
        this.first.setDisabled(ap == 1);
        this.prev.setDisabled(ap == 1);
        this.next.setDisabled(ap == ps);
        this.last.setDisabled(ap == ps);
        this.refresh.enable();
        this.updateInfo();
        this.fireEvent('change', this, d);
    }

5 楼 bcw104 2009-05-19  

我翻了一下2.2和3.0的api都有发现doLoad这个方法啊

4 楼 bcw104 2009-05-19  

引用

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

请问一下有这个属性吗?这是哪个版本的ext?

3 楼 qiuming0306 2009-04-25  

我想根据每一个列排序分页怎么办！不知道排序和刷新的时候怎么取出列排序方式并传给服务器！

2 楼 gzy5513536 2008-11-09  

谢谢！一直亟待解决的问题，今天终于找到了答案

1 楼 quiii 2008-08-15  

很好 很强大