利用Grid组件进行分页的基础

 概述: 本例将会带你进入Grid分页的世界

案例下载：http://www.vinylfox.com/extjs/examples/grid-paging.zip
案例演示：http://www.vinylfox.com/extjs/examples/grid-paging/grid-paging-working.php
英文原文：http://www.extjs.com/tutorial/basics-paging-grid-component
译文来源：http://www.ajaxjs.com/yuicn/article.asp?id=20076012

参考图：


Gird数据

Grid的分页必须依靠服务端（Server Side）来划分好每一页的数据才可以完成。
本例中的服务端语言是PHP,数据库是MySQL，用来导出一些随机的数据。下列脚本的作用是，获取我们想要的数据，同时这些数据是已分好页的数据。分页的参数是由分页工具条传入的变量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'}
        ])
               
    });

分页工具条

这里加入一个分页条到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再不是一件难事了。