EXTJS 之 Ext.PagingToolbar 的使用方法

出处：http://www.cnblogs.com/mylem/archive/2010/11/05/1870270.html

下面以一个实例，简单说一下这个控件的使用方法：

这个例子以服务器向客户端传递的数据为json格式的方式来说明，这也是绝大多数应用中所使用的方法，

一个分页应用中一般需要几个参数：

pageSize:一页中显示多少条记录；

curPage:当前显示第几页

totalCount:总计有多少条记录，可用来计算总页数

下面我们首先定义一下客户端的store:

  var g_store = new Ext.data.JsonStore({
  // jsonReader configs
  autoDestroy: true,　　//仅当绑定到多个组件时，才不用此句
  autoLoad:false,　　　　//我们不使用自动调入的方法
  root: 'rows',　　　　　　//这个指出服务器返回的json对象中用于显示记录的对象名，下面会看到  
  idProperty: 'Ids',　　　　//记录的ID属性
  fields:'....'　　　　　　　　//自定义一下吧

 });

下面再定义一个表格，把PagingToolbar放到它的下面:

g_grid = new Ext.grid.GridPanel({
  renderTo:'editor-grid', //DOM 控件
  store: g_store,
  view: new Ext.grid.GridView({
            autoFill:true
        }),
  // paging bar on the bottom
        bbar: new Ext.PagingToolbar({
            pageSize: 5,　　　　　　　　//指出每页显示的记录数
            store: g_store,//与grid是相同的store
            displayInfo: true,
            displayMsg: '当前显示记录: {0} - {1} 共计: {2}',
            emptyMsg: "没有记录可以显示"
        })
 });

上面我们注意到g_grid与PagingToolbar的store是相同的，这样我们就可以通过PagingToolbar控制store的同时也就控制了grid的显示了。

其实PagingToolbar和grid本来没什么关系，它们都是通过store联系在一起的，另外我们把PagingToolbar放到的grid里面，当然不放在grid里面也行。

 

下面来执行一下客户端的store的调入数据的操作：

var proxy=new Ext.data.HttpProxy({
   url:'http://www.xxx.com/sss.aspx'
   });
  g_store.proxy=proxy;   

  g_store.load({params:{start:0,limit:5}});//分页参数

 

上面的一段代码是使　g_store　使用ajax的方式向服务器端请求数据，load的参数指出了第一次读取数据时，数据是如何分页 的，start:指出这次请求的记录的起始行号，0表示从第一行开始，limit:表示每页显示的记录数，也就是说，如果显示记录后，用户点击了下一页 时，将自动向服务器提交参数：start:5,limit:5,再点击下一页时，则向服务器提交参数：start:10,limit:5。服务器端就可以 根据这些参数来向客户端返回相应的记录了。

 

好了，现在我们来看看服务器端的一些处理过程：

 

            int iStart = Convert.ToInt32(Request["start"].ToString());
            int iLimit = Convert.ToInt32(Request["limit"].ToString()); 

通过这两句我们就可以在服务器端的程序中取得客户端提交过来的分页参数了，然后根据这些参数从数据库中读取数据，同时还要再读出记录的总数来，然后组装json格式的字符串，并返回给客户端。

服务器端具体的分页程序，我只是简单的示意一下：

假设传入的分页参数如下：

@iPageSize int   //为每页显示数

@iPage int

DECLARE @iStart int

SET @iStart=@iPageSize*(@iPage-1)      

Declare @sSql nvarchar(max);

SET @sSql='SELECT TOP '+Cast(@iPageSize as nvarchar)+' iNum,sName FROM tblProduct
WHERE iNum NOT IN(SELECT TOP '+CAST(@iStart AS nvarchar)+' iNum From tblProduct)'

EXEC (@sSql)

 以上代码仅示意，具体分页代码要根据自己的业务需要来写。下面我将服务器端返回给客户端的json格式说明一下：

{success:true,total:88,rows:[{ID:1,Name:"Jhon"},{ID:2,Name:"Brown"},{xxx},{yyy},{zzz}]}

上面的json对象中:success:true,说明返回的ajax请求成功，total:88，表示一共有88条记录,rows:....,表示返回的具体记录内容。

success,total,这两个关键字不要修改，否则要在store创建时的JsonReader中声明，如：

  "totalProperty " : "results"
  "successProperty " : "succ" ,
rows这个关键字是在g_store的声明中的root标明的。

好了，PagingToolbar的使用中的关键技术就基本介绍完了，还有一些其他的属性，多看看API文档也就OK了。