博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
EXTJS pagingtoolbar使用
阅读量:6427 次
发布时间:2019-06-23

本文共 2436 字,大约阅读时间需要 8 分钟。

出处: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了。 
你可能感兴趣的文章
学习使用Bing Maps Silverlight Control(一):准备和新建
查看>>
什么是Scrum
查看>>
nginx负载均衡的5种策略
查看>>
90%人都不知道:SVN 和 Git 的一些误解和真相
查看>>
防火墙配置十大任务之九,验证防火墙的运行
查看>>
【linux】浅谈Linux下的 find 指令
查看>>
CentOS 7 使用kubeadm 部署 Kubernetes
查看>>
我的友情链接
查看>>
透视美国大数据爆发全景
查看>>
java学习第一天1.2
查看>>
清空输入缓冲区的方法
查看>>
Yii2 项目优化小贴士
查看>>
UIScrollView的判断位置的属性如下:
查看>>
Applicatin Loader上传app步骤记录
查看>>
两种方法修改table表的内容
查看>>
张小龙莫慌 马化腾莫急 你们要好好的 微信还有时间
查看>>
一些常用软件静默安装参数(nsis,msi,InstallShield ,Inno)
查看>>
部署mimic版本的Ceph分布式存储系统
查看>>
jquery 过滤器
查看>>
Java缓冲流细节
查看>>