学习EXT第五日--Grid组件的简易分页
2007-11-12 23:45
288 查看
教程:Grid组件的简易分页
概述: 本例将会带你进入Grid分页的世界原文作者:Shea Frederick 出处
参考图:
读者应先下载本例涉及的示范代码。这里是一个已经完成好的例子。
Gird数据
Grid的分页必须依靠服务端(Server Side)来划分好每一页的数据才可以完成。本例中的服务端语言是PHP,数据库是MySQL,用来导出一些随机的数据。下列脚本的作用是,获取我们想要的数据,同时这些数据是已分好页的数据。分页的参数是由Page Toolbar传入的变量limit和start所决定的。
$link = mysql_pconnect("test-db.vinylfox.com", "test", "testuser") or die("Could not connect"); mysql_select_db("test") or die("Could not select database"); $sql_count = "SELECT id, name, title, hire_date, active FROM random_employee_data"; $sql = $sql_count . " LIMIT ".$_GET['start'].", ".$_GET['limit']; $rs_count = mysql_query($sql_count); $rows = mysql_num_rows($rs_count); $rs = mysql_query($sql); while($obj = mysql_fetch_object($rs)) { $arr[] = $obj; } Echo $_GET['callback'].'({"total":"'.$rows.'","results":'.json_encode($arr).'})';
由于每个后台开发的环境都不尽相同,所以这里的服务端代码就不细究了。
怎么做一个分页的Grid
本例采用的是ScriptTagProxy,原因是 范例代码 和 服务端代码 不是在同一个服务器上(译注:即“跨域”),而大多数的情况是,在同一个服务器上得到数据,直接用HttpProxy就可以了。使用DataStore与平时唯一不同的地方,便是需要设置totalProerty属性。本例中,我们从服务端的脚本计算出“total”这个值,告诉DataStore总共有多少个记录,这里指的是所有的记录数。
var ds = new Ext.data.Store({ proxy: new Ext.data.ScriptTagProxy({ url: 'http://www.vinylfox.com/yui-ext/examples/grid-paging/grid-paging-data.php' }), reader: new Ext.data.JsonReader({ root: 'results', totalProperty: 'total', id: 'id' }, [ {name: 'employee_name', mapping: 'name'}, {name: 'job_title', mapping: 'title'}, {name: 'hire_date', mapping: 'hire_date', type: 'date', dateFormat: 'm-d-Y'}, {name: 'is_active', mapping: 'active'} ]) });
分页栏Toolbar
这里加入一个分页栏到Grid的面板中,--差不多完成喽。var gridFoot = grid.getView().getFooterPanel(true); var paging = new Ext.PagingToolbar(gridFoot, ds, { pageSize: 25, displayInfo: true, displayMsg: 'Displaying results {0} - {1} of {2}', emptyMsg: "No results to display" });
最后传入start和limit参数以初始化数据。
ds.load({params:{start:0, limit:25}});
花时间较多的地方是,在后台如何生成数据,以配合Grid的运作,一旦这些工作OK后,分页Grid再不是一件难事了。
http://www.ajaxjs.com/article.asp?id=20076012
相关文章推荐
- 学习EXT第五日--Grid组件的简易分页
- 学习YUI.Ext 第五天--Grid组件的简易分页
- Ext 介绍入门之 Tutorial: Grid组件的简易分页
- Tutorial: Grid组件的简易分页
- 强大的DataGrid组件[6]_调用存储过程服务端分页——Silverlight学习笔记[14]
- 解决 ext中grid添加按钮列,如何进行动作响应,以及如何同步调用ext内部组件
- Extjs学习 Ext.grid.GridPanel
- ExtJS学习(二)Ext组件模型
- EXt 表格(grid表格中加入超链接)-学习2
- Ext.grid.GridPanel + asp.net 数据分页
- extjs学习(三)--ext核心组件使用
- 页面上需分页的数据(如Ext.grid.GridPanel)的注意事项
- Ext JS 学习(6) Ext.FormPanel 组件的使用第三式(Combo的使用)
- 利用Grid组件进行分页的基础
- EXTJS学习系列基础篇:第八篇(转载)作者殷良胜,Ext组件系列之--textfield组件的基本用法
- 简易分页组件
- jquery简易分页组件
- Ext学习-高级组件介绍
- 有关Silverlight GridSplitter组件的研究——Silverlight学习笔记(4)
- Ext JS学习第五天 Ext_window组件(二)