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

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> 1extjs学习札记(四)带分页的gridextjs学习札记(四)带分页的gridvar store = new Ext.data.JsonStore(extjs学习札记(四)带分页的grid{
 2extjs学习札记(四)带分页的grid        root: 'topics',
 3extjs学习札记(四)带分页的grid        totalProperty: 'totalCount',
 4extjs学习札记(四)带分页的grid        idProperty: 'threadid',
 5extjs学习札记(四)带分页的grid        remoteSort: true,
 6extjs学习札记(四)带分页的grid
 7extjs学习札记(四)带分页的grid        fields: [
 8extjs学习札记(四)带分页的grid            'title''forumtitle''forumid''author',
 9extjs学习札记(四)带分页的gridextjs学习札记(四)带分页的grid            extjs学习札记(四)带分页的grid{ name: 'replycount', type: 'int' },
10extjs学习札记(四)带分页的gridextjs学习札记(四)带分页的grid            extjs学习札记(四)带分页的grid{ name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp' },
11extjs学习札记(四)带分页的grid            'lastposter''excerpt'
12extjs学习札记(四)带分页的grid        ],
13extjs学习札记(四)带分页的grid
14extjs学习札记(四)带分页的grid        // 因为跨域,所以使用ScriptTagProxy,在同一个域里边用HttpProxy
15extjs学习札记(四)带分页的gridextjs学习札记(四)带分页的grid        proxy: new Ext.data.ScriptTagProxy(extjs学习札记(四)带分页的grid{
16extjs学习札记(四)带分页的grid            url: 'http://extjs.com/forum/topics-browse-remote.php'
17extjs学习札记(四)带分页的grid        }
)
18extjs学习札记(四)带分页的grid    }
);

    这一次,我们使用了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 />--> 1extjs学习札记(四)带分页的gridextjs学习札记(四)带分页的gridvar pagingToolbar = new Ext.PagingToolbar(extjs学习札记(四)带分页的grid{
 2extjs学习札记(四)带分页的grid        pageSize: 25,
 3extjs学习札记(四)带分页的grid        store: store,
 4extjs学习札记(四)带分页的grid        displayInfo: true,
 5extjs学习札记(四)带分页的grid        displayMsg: 'Displaying topics {0} - {1} of {2}',
 6extjs学习札记(四)带分页的grid        emptyMsg: "
一篇文章也没有",
 7extjs学习札记(四)带分页的grid        items: [
 8extjs学习札记(四)带分页的gridextjs学习札记(四)带分页的grid                '-'extjs学习札记(四)带分页的grid{
 9extjs学习札记(四)带分页的grid                    pressed: true,
10extjs学习札记(四)带分页的grid                    enableToggle: true,
11extjs学习札记(四)带分页的grid                    text: 'Show Preview',
12extjs学习札记(四)带分页的grid                    cls: 'x-btn-text-icon details',
13extjs学习札记(四)带分页的gridextjs学习札记(四)带分页的grid                    toggleHandler: function(btn, pressed) extjs学习札记(四)带分页的grid{
14extjs学习札记(四)带分页的grid                        var view = grid.getView();
15extjs学习札记(四)带分页的grid                        view.showPreview = pressed;
16extjs学习札记(四)带分页的grid                        view.refresh();
17extjs学习札记(四)带分页的grid                    }

18extjs学习札记(四)带分页的grid}
]
19extjs学习札记(四)带分页的grid    }
);

    (不知道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 />-->  1extjs学习札记(四)带分页的grid///<reference path="vswd-ext_2.0.2.js" />
  2extjs学习札记(四)带分页的gridextjs学习札记(四)带分页的grid/**//*
  3extjs学习札记(四)带分页的grid*作者:大笨
  4extjs学习札记(四)带分页的grid*日期:2009-10-13
  5extjs学习札记(四)带分页的grid*版本:1.0
  6extjs学习札记(四)带分页的grid*博客地址:http://yage.cnblogs.com
  7extjs学习札记(四)带分页的grid*/

  8extjs学习札记(四)带分页的gridExt.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
  9extjs学习札记(四)带分页的gridextjs学习札记(四)带分页的gridExt.onReady(function() extjs学习札记(四)带分页的grid{
 10extjs学习札记(四)带分页的grid    //构造store
 11extjs学习札记(四)带分页的gridextjs学习札记(四)带分页的grid    var store = new Ext.data.JsonStore(extjs学习札记(四)带分页的grid{
 12extjs学习札记(四)带分页的grid        root: 'topics',
 13extjs学习札记(四)带分页的grid        totalProperty: 'totalCount',
 14extjs学习札记(四)带分页的grid        idProperty: 'threadid',
 15extjs学习札记(四)带分页的grid        remoteSort: true,
 16extjs学习札记(四)带分页的grid
 17extjs学习札记(四)带分页的grid        fields: [
 18extjs学习札记(四)带分页的grid            'title''forumtitle''forumid''author',
 19extjs学习札记(四)带分页的gridextjs学习札记(四)带分页的grid            extjs学习札记(四)带分页的grid{ name: 'replycount', type: 'int' },
 20extjs学习札记(四)带分页的gridextjs学习札记(四)带分页的grid            extjs学习札记(四)带分页的grid{ name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp' },
 21extjs学习札记(四)带分页的grid            'lastposter''excerpt'
 22extjs学习札记(四)带分页的grid        ],
 23extjs学习札记(四)带分页的grid
 24extjs学习札记(四)带分页的grid        // 因为跨域,所以使用ScriptTagProxy,在同一个域里边用HttpProxy
 25extjs学习札记(四)带分页的gridextjs学习札记(四)带分页的grid        proxy: new Ext.data.ScriptTagProxy(extjs学习札记(四)带分页的grid{
 26extjs学习札记(四)带分页的grid            url: 'http://extjs.com/forum/topics-browse-remote.php'
 27extjs学习札记(四)带分页的grid        }
)
 28extjs学习札记(四)带分页的grid    }
);
 29extjs学习札记(四)带分页的grid
 30extjs学习札记(四)带分页的grid    store.setDefaultSort("lastpost""DESC");  //设置默认的排序列和方向
 31extjs学习札记(四)带分页的grid
 32extjs学习札记(四)带分页的grid    //构造带分页功能的工具栏
 33extjs学习札记(四)带分页的gridextjs学习札记(四)带分页的grid    var pagingToolbar = new Ext.PagingToolbar(extjs学习札记(四)带分页的grid{
 34extjs学习札记(四)带分页的grid        pageSize: 25,
 35extjs学习札记(四)带分页的grid        store: store,
 36extjs学习札记(四)带分页的grid        displayInfo: true,
 37extjs学习札记(四)带分页的grid        displayMsg: '第{0}-第{1}条,一共{2}条',
 38extjs学习札记(四)带分页的grid        emptyMsg: "No topics to display",
 39extjs学习札记(四)带分页的grid        items: [
 40extjs学习札记(四)带分页的gridextjs学习札记(四)带分页的grid                '-'extjs学习札记(四)带分页的grid{
 41extjs学习札记(四)带分页的grid                    pressed: true,
 42extjs学习札记(四)带分页的grid                    enableToggle: true,
 43extjs学习札记(四)带分页的grid                    text: '预览',
 44extjs学习札记(四)带分页的grid                    cls: 'x-btn-text-icon details',
 45extjs学习札记(四)带分页的gridextjs学习札记(四)带分页的grid                    toggleHandler: function(btn, pressed) extjs学习札记(四)带分页的grid{
 46extjs学习札记(四)带分页的grid                        var view = grid.getView();
 47extjs学习札记(四)带分页的grid                        view.showPreview = pressed;
 48extjs学习札记(四)带分页的grid                        view.refresh();
 49extjs学习札记(四)带分页的grid                    }

 50extjs学习札记(四)带分页的grid}
]
 51extjs学习札记(四)带分页的grid    }
);
 52extjs学习札记(四)带分页的grid
 53extjs学习札记(四)带分页的grid    //构造带有分页工具栏的grid
 54extjs学习札记(四)带分页的gridextjs学习札记(四)带分页的grid    var grid = new Ext.grid.GridPanel(extjs学习札记(四)带分页的grid{
 55extjs学习札记(四)带分页的grid        renderTo:"grid",
 56extjs学习札记(四)带分页的grid        width: 700,
 57extjs学习札记(四)带分页的grid        height: 500,
 58extjs学习札记(四)带分页的grid        title: '带分页功能的grid',
 59extjs学习札记(四)带分页的grid        store: store,
 60extjs学习札记(四)带分页的grid        trackMouseOver: false,
 61extjs学习札记(四)带分页的grid        disableSelection: true,
 62extjs学习札记(四)带分页的grid        loadMask: true,
 63extjs学习札记(四)带分页的grid
 64extjs学习札记(四)带分页的grid        // grid的列
 65extjs学习札记(四)带分页的gridextjs学习札记(四)带分页的grid        columns: [extjs学习札记(四)带分页的grid{
 66extjs学习札记(四)带分页的grid            id: 'topic',
 67extjs学习札记(四)带分页的grid            header: "主题",
 68extjs学习札记(四)带分页的grid            dataIndex: 'title',
 69extjs学习札记(四)带分页的grid            width: 420,
 70extjs学习札记(四)带分页的grid            renderer: renderTopic,
 71extjs学习札记(四)带分页的grid            sortable: true
 72extjs学习札记(四)带分页的gridextjs学习札记(四)带分页的grid        }
extjs学习札记(四)带分页的grid{
 73extjs学习札记(四)带分页的grid            header: "作者",
 74extjs学习札记(四)带分页的grid            dataIndex: 'author',
 75extjs学习札记(四)带分页的grid            width: 100,
 76extjs学习札记(四)带分页的grid            hidden: true,
 77extjs学习札记(四)带分页的grid            sortable: true
 78extjs学习札记(四)带分页的gridextjs学习札记(四)带分页的grid        }
extjs学习札记(四)带分页的grid{
 79extjs学习札记(四)带分页的grid            header: "回复数",
 80extjs学习札记(四)带分页的grid            dataIndex: 'replycount',
 81extjs学习札记(四)带分页的grid            width: 70,
 82extjs学习札记(四)带分页的grid            align: 'right',
 83extjs学习札记(四)带分页的grid            sortable: true
 84extjs学习札记(四)带分页的gridextjs学习札记(四)带分页的grid        }
extjs学习札记(四)带分页的grid{
 85extjs学习札记(四)带分页的grid            id: 'last',
 86extjs学习札记(四)带分页的grid            header: "最后回复",
 87extjs学习札记(四)带分页的grid            dataIndex: 'lastpost',
 88extjs学习札记(四)带分页的grid            width: 150,
 89extjs学习札记(四)带分页的grid            renderer: renderLast,
 90extjs学习札记(四)带分页的grid            sortable: true
 91extjs学习札记(四)带分页的grid}
],