extjs 学习笔记 四 带分页的grid.doc

现在几乎所有的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({?root: topics,?totalProperty: totalCount,?idProperty: threadid,?remoteSort: true,?fields: [?title, forumtitle, forumid, author,?{ name: replycount, type: int },?{ name: lastpost, mapping: lastpost, type: date, dateFormat: timestamp },?lastposter, excerpt?],?// 因为跨域，所以使用ScriptTagProxy，在同一个域里边用HttpProxy?proxy: new Ext.data.ScriptTagProxy({?url: /forum/topics-browse-remote.php?})?});? 这一次，我们使用了JsonStore类来构造所需要的Store对象，顾名思义，这是用来转化json格式的数据的。另外我们是从外部服务器来获取数据，所以代码相对于原来从数组里边获得数据要复杂一些，我们来看看用到的那些参数的意义：?root：包含数据行集合的属性名字。?totalProperty：表示数据集中全部记录数的属性名字，只有在分页的时候才需要。?idProperty：数据行中用来作为标识的属性的名字。?remoteSort：排序的时候是否通过proxy获得新的数据，默认是false。?fields：上一个系列里边提到过。这里多了一个mapping，它是将数据里边的名字映射成封装后的Record字段的名字，名字相同的时候，可以忽略。?proxy：数据的来源。在这里，我们只需要知道我们的数据是从url指明的地址获得的，因为这个地址是跨域的，所以使用ScriptTagProxy。?需要注意的是，从服务器返回的数据必须具有如下的格式：? 复制代码代码如下: {?totalCount:10000, //对应totalProperty属性的值?topics:[ //对应root户型的值?//这里是json对象的集合，每一个对象的属性?//需要和fields里边name属性的值对应?//观察url返回给我们的数据可以更清楚的看明白这一点?]?}? 接下来就是构造我们的分页工具栏了：? 复制代码代码如下: var pagingToolbar = new Ext.PagingToolbar({?pageSize: 25,?store: store,?displayInfo: true,?displayMsg: Displaying topics {0} - {1} of {2},?emptyMsg: 没有文章,?items: [?-, {?pressed: true,?enableToggle: true,?text: Show Preview,?cls: x-btn-text-icon details,?toggleHandler: function(