extjs学习札记（四）带分页的grid

extjs学习笔记（四）带分页的grid

很多时候，我们需要显示在grid中的数据不是短短的几条或者几十条，而是成千上万条。如果让大量的数据一股脑全都显示在一个页面中，可以想象会造成什么样的用户体验。因此，现在几乎所有的grid控件都会支持分页功能。extjs也不例外，它对分页也提供了强大而方便的支持，使得我们在分页处理上可以得心应手。
??? 在extjs中，类Ext.PagingToolbar封装了关于分页的操作，该类从Toolbar继承而来，单从名字上看，我们也猜得出这是一个能够处理分页的工具栏。好吧，那我们就来看看如何构造这样一个工具栏吧。PagingToolbar类的构造函数需要一个json对象来进行配置，在js中，使用json对象来提供所需参数非常方便，这样使得我们可以只填写感兴趣的参数，并且不必关心参数的顺序。我们的分页工具栏常用的配置参数包括：
??? pageSize：每页显示的记录数，默认是20。
??? store：这个和grid里边的store参数是一样的，因为分页也需要和数据打交道，所以需要这个参数。
??? displayMsg：显示的分页状态信息，例如“第{0}-第{1}条，一共{2}条"，注意一定要有大括号括起来的0，1，2，分别代表当前页的开始，结束，还有全部的记录数，其它的字自己随便写吧，只要读起来通顺就可以了，该信息会显示在分页工具栏的右侧。
??? displayInfo：是否显示displayMsg，默认是不显示。
??? emptyMsg：没有记录时显示的文本。
??? items：要在工具栏上显示的项，我们在构造之后再来看一下都可以有哪些项。
??? 好了，现在可以构造我们的分页工具栏了，不过因为我们的参数里边需要一个Store类的对象，所以我们先来构造它：

var?store?=?new?Ext.data.JsonStore({
?2????????root:?'topics',
?3????????totalProperty:?'totalCount',
?4????????idProperty:?'threadid',
?5????????remoteSort:?true,
?6
?7????????fields:?[
?8????????????'title',?'forumtitle',?'forumid',?'author',
?9????????????{?name:?'replycount',?type:?'int'?},
10????????????{?name:?'lastpost',?mapping:?'lastpost',?type:?'date',?dateFormat:?'timestamp'?},
11????????????'lastposter',?'excerpt'
12????????],
13
14????????//?因为跨域，所以使用ScriptTagProxy，在同一个域里边用HttpProxy
15????????proxy:?new?Ext.data.ScriptTagProxy({
16????????????url:?'http://extjs.com/forum/topics-browse-remote.php'
17????????})
18????});

??? 这一次，我们使用了JsonStore类来构造所需要的Store对象，顾名思义，这是用来转化son格式的数据的。另外我们是从外部服务器来获取数据，所以代码相对于原来从数组里边获得数据要复杂一些，我们来看看用到的那些参数的意义：
??? root：包含数据行集合的属性名字。
??? totalProperty：表示数据集中全部记录数的属性名字，只有在分页的时候才需要。
??? idProperty：数据行中用来作为标识的属性的名字。
??? remoteSort：排序的时候是否通过proxy获得新的数据，默认是false。
??? fields：上一个系列里边提到过。这里多了一个mapping，它是将数据里边的名字映射成封装后的Record字段的名字，名字相同的时候，可以忽略。
??? proxy：数据的来源。在这里，我们只需要知道我们的数据是从url指明的地址获得的，因为这个地址是跨域的，所以使用ScriptTagProxy。
??? 需要注意的是，从服务器返回的数据必须具有如下的格式：

var?pagingToolbar?=?new?Ext.PagingToolbar({
?2????????pageSize:?25,
?3????????store:?store,
?4????????displayInfo:?true,
?5????????displayMsg:?'Displaying?topics?{0}?-?{1}?of?{2}',
?6????????emptyMsg:?"一篇文章也没有",
?7????????items:?[
?8????????????????'-',?{
?9????????????????????pressed:?true,
10????????????????????enableToggle:?true,
11????????????????????text:?'Show?Preview',
12????????????????????cls:?'x-btn-text-icon?details',
13????????????????????toggleHandler:?function(btn,?pressed)?{
14????????????????????????var?view?=?grid.getView();
15????????????????????????view.showPreview?=?pressed;
16????????????????????????view.refresh();
17????????????????????}
18}]
19????});

??? (不知道vs2008的格式化功能为什么把第18行的括号给放在最靠左边的位置，望哪位朋友知道解决的方法告知一下。)
??? items是工具栏上项的集合，默认的类型是按钮。我们这里只用到了两项，“-”代表分隔符，第二项就是一个button，我们来看看其中每个属性都表示什么：
??? pressed：表示按钮在开始的时候是否被按下，只有enableToggle为真的时候才有用。
??? enableToggle：指示button是否能处于被按下的状态。
??? text：按钮上显示的文本。
??? cls：按钮的css类。
??? toggleHander：设置enableToggle为true时点击按钮时的事件处理函数。
??? 是时候把分页工具栏和grid组合在一起了，这次我们的grid没有使用ColumnModel而是使用columns属性，同时我们使用了viewConfig来对用户界面进行配置，看下完整的代码吧：

///<reference?path="vswd-ext_2.0.2.js"?/>
??2/**//*
??3*作者：大笨
??4*日期：2009-10-13
??5*版本：1.0
??6*博客地址：http://yage.cnblogs.com
??7*/
??8Ext.BLANK_IMAGE_URL?=?'../extjs/resources/images/default/s.gif';
??9Ext.onReady(function()?{
?10????//构造store
?11????var?store?=?new?Ext.data.JsonStore({
?12????????root:?'topics',
?13????????totalProperty:?'totalCount',
?14????????idProperty:?'threadid',
?15????????remoteSort:?true,
?16
?17????????fields:?[
?18????????????'title',?'forumtitle',?'forumid',?'author',
?19????????????{?name:?'replycount',?type:?'int'?},
?20????????????{?name:?'lastpost',?mapping:?'lastpost',?type:?'date',?dateFormat:?'timestamp'?},
?21????????????'lastposter',?'excerpt'
?22????????],
?23
?24????????//?因为跨域，所以使用ScriptTagProxy，在同一个域里边用HttpProxy
?25????????proxy:?new?Ext.data.ScriptTagProxy({
?26????????????url:?'http://extjs.com/forum/topics-browse-remote.php'
?27????????})
?28????});
?29
?30????store.setDefaultSort("lastpost",?"DESC");??//设置默认的排序列和方向
?31
?32????//构造带分页功能的工具栏
?33????var?pagingToolbar?=?new?Ext.PagingToolbar({
?34????????pageSize:?25,
?35????????store:?store,
?36????????displayInfo:?true,
?37????????displayMsg:?'第{0}-第{1}条，一共{2}条',
?38????????emptyMsg:?"No?topics?to?display",
?39????????items:?[
?40????????????????'-',?{
?41????????????????????pressed:?true,
?42????????????????????enableToggle:?true,
?43????????????????????text:?'预览',
?44????????????????????cls:?'x-btn-text-icon?details',
?45????????????????????toggleHandler:?function(btn,?pressed)?{
?46????????????????????????var?view?=?grid.getView();
?47????????????????????????view.showPreview?=?pressed;
?48????????????????????????view.refresh();
?49????????????????????}
?50}]
?51????});
?52
?53????//构造带有分页工具栏的grid
?54????var?grid?=?new?Ext.grid.GridPanel({
?55????????renderTo:"grid",
?56????????width:?700,
?57????????height:?500,
?58????????title:?'带分页功能的grid',
?59????????store:?store,
?60????????trackMouseOver:?false,
?61????????disableSelection:?true,
?62????????loadMask:?true,
?63
?64????????//?grid的列
?65????????columns:?[{
?66????????????id:?'topic',
?67????????????header:?"主题",
?68????????????dataIndex:?'title',
?69????????????width:?420,
?70????????????renderer:?renderTopic,
?71????????????sortable:?true
?72????????},?{
?73????????????header:?"作者",
?74????????????dataIndex:?'author',
?75????????????width:?100,
?76????????????hidden:?true,
?77????????????sortable:?true
?78????????},?{
?79????????????header:?"回复数",
?80????????????dataIndex:?'replycount',
?81????????????width:?70,
?82????????????align:?'right',
?83????????????sortable:?true
?84????????},?{
?85????????????id:?'last',
?86????????????header:?"最后回复",
?87????????????dataIndex:?'lastpost',
?88????????????width:?150,
?89????????????renderer:?renderLast,
?90????????????sortable:?true
?91}],

查看更多 下一篇