EXTJS 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了。 
相关文章
|
弹性计算 Linux Windows
【阿里云幻兽帕鲁】搭建 密码 存档 使用 费用 常见问题合集
幻兽帕鲁作为一款爆火的游戏,在进行多人游戏时,需要搭建服务器。本文章汇总了在阿里云上搭建幻兽帕鲁服务器时可能会遇到部署问题、配置选择问题、运行问题等,以便用户快速参考和解决搭建和运行中的挑战。
15984 0
|
消息中间件 关系型数据库 MySQL
Flink--6、输出算子(连接到外部系统、文件、kafka、MySQL、自定义Sink)
Flink--6、输出算子(连接到外部系统、文件、kafka、MySQL、自定义Sink)
|
SQL 关系型数据库 MySQL
分享一个 .Net core Console 项目使用 SqlSugar 的详细例子
分享一个 .Net core Console 项目使用 SqlSugar 的详细例子
677 0
|
Kubernetes 网络协议 网络架构
在K8S中,keepalived是如何检测工作节点是否存活的?
在K8S中,keepalived是如何检测工作节点是否存活的?
|
11月前
|
SQL 数据处理 数据库
领域设计之仓储和工厂模式!
领域设计之仓储和工厂模式!
162 0
领域设计之仓储和工厂模式!
|
存储 安全 算法
加盐哈希的科学原理及其重要性
【8月更文挑战第31天】
596 0
|
机器学习/深度学习 API Docker
使用Python实现深度学习模型:模型部署与生产环境应用
【7月更文挑战第7天】 使用Python实现深度学习模型:模型部署与生产环境应用
459 0
|
DataWorks 关系型数据库 数据处理
DataWorks常见问题之多个数据离线同步任务卡在运行状态10个多小时如何解决
DataWorks是阿里云提供的一站式大数据开发与管理平台,支持数据集成、数据开发、数据治理等功能;在本汇总中,我们梳理了DataWorks产品在使用过程中经常遇到的问题及解答,以助用户在数据处理和分析工作中提高效率,降低难度。
253 0
|
SQL 算法 Oracle
在线sql格式化工具
让SQL代码整洁如新,在线SQL格式化工具助力高效编程
613 1
|
缓存 Java 测试技术
总结|性能优化思路及常用工具及手段
性能优化是降低成本的手段之一,每年大促前业务平台都会组织核心链路上的应用做性能优化,一方面提升系统性能,另外一方面对腐化的代码进行清理。本文结合业务平台性能优化的经验,探讨一下性能优化的思路及常用工具及手段。
76500 1