教程:Grid组件的基本分页

读者应先下载本例涉及的示范代码。这里是一个有效的例子。

Grid数据
Grid的分页必须依靠服务端（Server Side）来划分好每一页的数据才可以完成。

本例中的服务端事PHP，数据库是MySQL，用来导出一些随机的数据。下列脚本的作用是，获取我们想要的数据，同时这些数据事已分好页的数据。分页的参数是由EXT本身的分页工具条PageToolbar传入的变量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_TotalCounts = "SELECT count(*) as total FROM random_employee_data";

$rs_TotalCounts = mysql_query($sql_TotalCounts);
$arTotalCounts = mysql_fetch_array ( $rs_TotalCounts, MYSQL_ASSOC );
$TotalCounts = $arTotalCounts['total'];
mysql_free_result($rs_TotalCounts);

$retData = 'null';

if ((array_key_exists('start', $_GET)) and
    (array_key_exists('limit', $_GET)) and
    ($TotalCounts != 0)) {

    $sql = "SELECT id, name, title, hire_date, active FROM random_employee_data LIMIT ".$_GET['start'].", ".$_GET['limit'];

    $rs = mysql_query($sql);

    while($obj = mysql_fetch_object($rs))
    {
        $arr[] = $obj;
    }

    $retData = json_encode($arr);

    mysql_free_result($rs);
}

mysql_close($link);

$callback = array_key_exists('callback', $_GET) ? $_GET['callback'] : '';

echo $callback.'({"total":"'.$TotalCounts.'","results":'.$retData.'})';

怎么做一个分页的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'}
        ])

    });

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"
    });

Author: Shea Frederick(译者：Frank Cheung)
Recived from "http://extjs.com/learn/Tutorial:Basics_of_Paging_With_the_Grid_Component_%28Chinese%29"