带分页页面的四格

因此，现在几乎所有的网格控件都支持分页。Extjs也不例外，它还为分页提供了强大便捷的支持，让我们在分页处理上得心应手。在extjs中，类Ext。分页工具栏封装了从工具栏继承的分页操作。单从名字上，我们就能猜到这是一个可以处理分页的工具栏。好，让我们看看如何构造这样一个工具栏。PagingToolbar类的构造函数需要一个json对象进行配置。在js中，使用json对象提供所需的参数非常方便，这样我们就可以只填写自己感兴趣的参数，而不需要关心参数的顺序。我们分页工具栏常用的配置参数包括：pageSize:每页显示的记录数，默认为20条。Store:这和网格中的store参数是一样的，因为分页也需要处理数据，所以需要这个参数。显示消息：显示的分页状态信息，如“{0}- {1}”，共{2}。请注意，括号内必须有0、1、2，分别代表当前页面的开始和结束，以及所有记录。其他单词请自己写，只要读起来顺口。该信息将显示在分页工具栏的右侧。DisplayInfo:是否显示displayMsg，默认不显示。EmptyMsg:没有记录时显示的文本。项目：对于要显示在工具栏上的项目，我们来看看构建后有哪些项目可用。好了，现在我们可以构造分页工具栏了，但是由于我们的参数中需要一个Store类的对象，我们先构造一下：复制代码如下： varstore=new ext . data . jsonstore({ root 3360 ' topics '，totalProperty: 'totalCount '，idProperty: 'threadid '，remoteSort: true，fields: [ 'title '，' forumtitle '，' forumid '，' author '，{ name: ' replycount这一次，我们使用JsonStore类来构造所需的Store对象，顾名思义，该对象用于转换json格式的数据。此外，我们从外部服务器获取数据，因此代码比从数组获取的原始数据更复杂。让我们看看所用参数的含义：root:包含数据行集的属性的名称。TotalProperty:表示数据集中记录总数的属性的名称，仅在分页时需要。IdProperty:数据行中用作标识符的属性的名称。RemoteSort:排序时是否通过代理获取新数据，默认为false。菲尔兹：上个系列中提到过。这里有一个映射，它将数据中的名称映射到封装的记录字段的名称。如果名称相同，可以忽略。代理：数据的来源。这里，我们只需要知道我们的数据是从url指示的地址获取的，因为这个地址是跨域的，所以我们使用ScriptTagProxy。

需要注意的是，从服务器返回的数据必须具有以下格式：复制代码如下： {'totalcount' :10000，totalProperty属性' topics '对应的值：[ //根单元类型对应的值//这里是json对象的集合。每个对象//的属性需要对应于字段中名称属性的值。//我们通过观察url]返回的数据可以更清楚地看到这一点}下一步是构建我们的分页工具栏：复制代码如下：VAR分页工具栏=newext。分页工具栏({Pagesize 336025，Store 3360Store，DisplayInfo 3360True，Displaymsg: '显示主题{0}-{1}，共{2} '，空msg: '无文章'，项目3360 ['-'，{按下3360True，启用切换3360 True，文本： '显示预览'，cls : ' x-btn-文本-图标详细信息'，toggleHandler:函数(BTN，view.showPreview=已按下；view . refresh()；} }] });Items是工具栏上项目的集合，默认类型是button。我们这里只用了两项，“-”代表分隔符，第二项是按钮。让我们看看每个属性意味着什么：按下：表示按钮是否在开始时被按下，这仅在enableToggle为true时有用。EnableToggle:指示是否可以按下按钮。文本：按钮上显示的文本。Cls:按钮的css类。ToggleHander:当enableToggle为true时，设置按钮被点击时的事件处理功能。

是时候把分页工具栏和格子组合在一起了，这次我们的格子没有使用ColumnModel而是使用列属性，同时我们使用了视图配置来对用户界面进行配置，看下完整的代码吧：复制代码代码如下：///引用路径=' vswd-ext _ 2。0 .2 .js '//* */* * *作者：大笨*日期：2009-10-13 *版本：1.0 *博客地址：http://yage.cnblogs.com */Ext .BLANK _ IMage _ URL='/ext js/resources/images/default/s . gif '；Ext.onReady(function() { //构造store var store=new ext。数据。jsonstore({ root : ' topics '，totalProperty: 'totalCount '，idProperty: 'threadid '，remoteSort: true，field :[' title '，' forumtitle '，' forumid '，' author '，{ name: 'replycount '，type: 'int' }，{ name: ' lastpost '，mapping: ' lastpost '，type 33: '因为跨域，所以使用ScriptTagProxy，在同一个域里边用httproxy代理：新Ext。数据。scripttagproxy({ URL : ' http://ext js。com/forum/topics-browse-remote。PHP ' })})；store.setDefaultSort('lastpost '，' desc ')；//设置默认的排序列和方向//构造带分页功能的工具栏var pagingToolbar=新分机.分页工具栏({ pageSize: 25，store: store，displayInfo: true，displayMsg: '第{0}-第{1}条，一共{2}条，emptyMsg: "没有要显示的主题“，项目：['-'，{按下：为真，启用切换：为真，文本： '预览，cls : ' x-BTN-text-icon details '，toggleHandler:函数(BTN，按下){ var view=grid。getview()；view.showPreview=已按下；查看。刷新()；} }] });//构造带有分页工具栏的grid var grid=new ext。网格。网格面板({ renderto : ' grid '，宽度： 700，高度： 500，标题： '带分页功能的网格，存储：存储，跟踪鼠标覆盖：假，禁用选项：真，加载掩码：真，//网格的列列s 3360[{ id : ' topic '，header: '主题，dataIndex: 'title '，width: 420，renderer: renderTopic，sortable: true }，{ header: '作者，数据索引： '作者，width: 100，hidden: true，sortable: true }，{ header: '回复数，dataIndex: 'replycount '，width: 70，align: 'right '，sortable: true }，{ id: 'last '，header: '最后回复，dataIndex: 'lastpost '，width: 150，renderer: renderLast，sortable: true }]，//定制用户界面视图配置： { forcefit : true，enableRowBody: true，showPreview: true，getRowClass:函数（记录、行索引、p、存储){如果(这个。showpreview){ p . body=' p '记录。数据。提取'/p '；返回“x网格3行扩展”；}返回“x网格3行折叠”；} }, //在顶部的分页工具栏//tbar : PaginToolBar，//在底部的分页工具栏bbar : PaginToolbar })；//加载数据商店。load({ params : { start : 0，limit : 25 } })；//主题列的渲染器函数函数renderTopic(值，p，记录){返回字符串。格式(' a href=' http://ext js。com/forum/showthread。PHP？t={ 2 } ' href=' http://ext js。com/forum/showthread。PHP？t={ 2 } ' target=' _ blank ' { 0 }/aa href=' http://ext js。com/论坛展示。PHP？f={ 3 } ' href=' http://ext js。com/论坛展示。PHP？f={ 3 } ' target=' _ blank ' { 1 }论坛/a '，值，record.data.forumtitle，record.id，record。数据。foru mid)；} //最后回复列的渲染器函数函数renderLast(值，p，r){返回字符串。format(' { 0 } br/by { 1 } '，value.dateFormat('M j，Y，g:i a ')，r . data[' last pear '])；} }) 运行下看看效果，我们可以看到在获取数据的时候，页面被动画遮盖住，如图

当数据加载完成后，我们可以看到数据以网格的形式显示在页面中，并按照最后发布的列降序排列，其中隐藏了作者列：。

当您单击要排序的列名时，将从服务器重新加载新数据。点击右侧箭头翻页，点击“预览”按钮查看效果。虽然这段代码比最简单的网格要简单得多，但效果要酷得多。让我们从头开始整理代码：第八行使用一个图片占位符，它指向一个空图片。在extjs的库文件中，此图片占位符将根据需要替换为另一张图片。在我们的例子中，如果删除这一行，影响不会太大，但是标题栏中“最后回复”旁边的小向下箭头会消失。让我们养成写这一行的习惯。第11-28行构造了Store类的一个对象，这没什么好说的。第30行将lastpost列设置为默认的排序列，并按降序排列。注意“desc”必须大写，升序为“ASC”。第33-51行构建了带有分页的工具栏，上面已经提到过。54-112行构建了一个具有分页功能的网格。第60行表示当鼠标悬停在该行上时，该行不会突出显示。第61行表示用户不能选择网格。第62行表示加载数据时覆盖页面。我们可以在截图上看到效果，但建议自己跑去看效果。毕竟这里展示的是动画。加载数据后，掩蔽效应消失。第94-105行设置用户界面。让我们看看每个参数的含义：forceFit:是否强制列调整其宽度，使其不出现水平滚动条。默认值为假。EnableRowBody:为true时，允许每行添加一个tr元素来扩展数据线。show preview:bool类型的用户定义属性，用于控制是否在代码中显示预览。GetRowClass:这是一个重写行的css样式的方法。它有四个参数，第一个是代表该行数据的Record对象，第二个是该行的索引，第三个是enableRowBody设置为true时传入的参数。该行的数据可以通过该参数的body属性进行扩展。该方法应该返回一个css类名。在我们的例子中，文章的摘要信息是根据showPreview的值动态显示的。11行显示网格底部的分页工具栏。如果想在顶部显示，可以用tbar代替bbar。15行向服务器发送数据请求，extjs会通过post将params中的参数发送到服务器，其中start表示要从多少条数据开始，limit表示每页要显示多少数据。18到126是两个渲染器函数，在前面的系列中已经解释过了。最后需要指出的是，分页功能实际上是在服务器端完成的。当客户端翻页时，参数会像115行一样提交。我们需要根据服务器端传递的star和limit的值计算应该返回的数据，并以正确的格式发送给客户端。至于服务器如何获取客户端传递的参数，如何向客户端发送数据，请参考本系列的第一节。