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类的对象，所以我们先来构造它：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->  1 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。
    需要注意的是，从服务器返回的数据必须具有如下的格式：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> {
     " totalCount " : 10000 ,  // 对应totalProperty 属性的值
     " topics " :[                  // 对应root 户型的值
             // 这里是json对象的集合，每一个对象的属性
             // 需要和fields里边name属性的值对应
             // 观察url返回给我们的数据可以更清楚的看明白这一点
      ]
}

    接下来就是构造我们的分页工具栏了：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->  1 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来对用户界面进行配置，看下完整的代码吧：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->   1 // /<reference path="vswd-ext_2.0.2.js" />
  2 /**/ /*
  3*作者：大笨
  4*日期：2009-10-13
  5*版本：1.0
  6*博客地址：http://yage.cnblogs.com
  7*/
  8 Ext.BLANK_IMAGE_URL  =   ' ../extjs/resources/images/default/s.gif ' ;
  9 Ext.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}],