淺談Ext.PagingToolbar 使用

Ext.PagingToolbar 是一个数据分页工具条,可以綁定到Ext.data.Store来提供自动的分页控制,但实际上的数据分页是由服务器端来提供的,也就是说PagingToolbar仅是自动向服务器提供分页的参数,由服务器来对分页参数进行处理后,返回给客户端当前要显示的当前页的记录。

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

这个例子以服务器向客户端传递的数据为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 @[email protected]*(@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了。

更多相关文章
  • 


    		    談談Ext JS的組件——布局的使用方法續一
    盒子布局 盒子布局主要作用是以水平(Ext.layout.container.HBox)或垂直方式(Ext.layout.container.VBox)来划分容器区域.这也是比较常有的布局方式. 使用盒子布局,除了要在容器定义layout配置项外,还需要在子组件指定子组件的宽度(HBox)或高度(V
  • 概述 Ext.Component是所有Ext组件的基类,这在Ext.Component的API中第一句话就提到了.然后第二段说明了它包含的基本功 能:隐藏/显示.启用/禁用以及尺寸控制等.除了以上这些基本功能,其实还
  • 好久之前转发过一篇关于Ext Store.each方法的文章.http://wangyuelucky.blog.51cto.com/1011508/1064777 只是把API给弄了过来,还有一个小例子.这就是我当时
  • 以用户为中心的时代,应用的界面外观变得越来越重要.然而,很多程序员都缺乏美术功底,要开发出界面美观的应用实属不易.Ext JS的出现,为广大程序员解决了这一难题.它有丰富多彩的界面和强大的功能,是开发具有炫丽外观的R
  • 在使用Extjs制作crud时,由于添加和修改界面的高度相似,使用了相同的row字段. 在角色字段中使用了change监听事件,用于动态的无效化权限分配字段,因为权限分配界面默认没有隐藏,设定了checked:tru
  • 淺談linux 中的目標文件 即.o後綴名的文件
    实际上 目标文件从结构上讲,已经非常接近可执行文件,只是没有经过链接的过程,所以其中有些符号或者地址还没有被调整. 实际上上在linux下 都是可以称之为ELF文件. 看一下这个图,a.out 就是我们的hello.c的执行文件.hello.o 就是目标文件 所以实际上他们2 几乎是一样的.     ...
  • 修練營ASP.NET淺談多層式架構 (Multi Tiers)
    從需求談起 我們舉個小例子來理解一般的方式與多層的方式有何不同 假設:我需要顯示最近三個月內,所有營業員的銷售金額成績排名   一般的做法: 在一個畫面中,拉個GridView,一個SqlDataSouce,把需求的語法設定好在SqlDataSouce之後,接著顯示出來就可以了. 這樣的做法,從[資 ...
  • 


    		    淺談組策略設置IE受信任站點
    在企业中,通常会有一些业务系统,要求必须加入到客户端IE受信任站点,才能完全正常运行访问,
一周排行