主要介紹如何使用ext的表格控件實現ajax分頁。上一節講了ext的普通表格，當然ext表格最強的還是利用ajax分頁，這裏要加上服務端的代碼了，本實例採用fleaphp框架演示，列出控制器的相關代碼：
function actionList() {
$modelBO = & FLEA::getSingleton('Model_board');
load_class('FLEA_Helper_Pager');
$page = isset($_REQUEST['start']) ? (int)$_REQUEST['start']-1 : 0;//start爲ext傳遞的參數
$pager= new FLEA_Helper_Pager($modelBO,$page,20,null,'board_id DESC');
$posts = $pager->findAll();
$post_arr = array('0'=>'未回覆','1'=>'已回覆');
foreach ($posts as $val2) {
$temp['board_id'] = $val2['board_id'];
$temp['title'] = $val2['title'];
$temp['comment'] = $val2['comment'];
$temp['is_post'] = $post_arr[$val2['is_post']];
$temp['post_comment'] = $val2['post_comment'];
$temp['add_time'] = $val2['add_time'];
$temp['add_user'] = $val2['add_user'];
$new_arr[] = $temp;
}
$result['topics'] = $new_arr;
$js=count($modelBO->findAll());
$result['totalCount'] = $js;
require('./common/Json.php');
$json = new Services_JSON();
echo $json->encode($result);
}
客戶端的js腳本主要與前一章普通表格差不多，所不同的是增加服務端加載的數據源，及分頁按鈕：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<script>
Ext.onReady(function(){
var ds = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({url:'index.php?controller=board&action=list'}),//此處設置服務端路徑
reader: new Ext.data.JsonReader({
root: 'topics',
totalProperty: 'totalCount',
id: 'board_id'
},[
'board_id','title','is_post','add_time','add_user'
])
});
var sm = new Ext.grid.CheckboxSelectionModel();
var colModel = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'ID',width:50,sortable:true,dataIndex:'board_id'},
{header:'標題', width:300,sortable:true,dataIndex:'title'},
{header:'作者', width:150,sortable:true,dataIndex:'add_user'},
{header:'是否回覆',width:100,sortable:true,dataIndex:'is_post'},
{header:'發佈時間',width:200,sortable:true,dataIndex:'add_time'}
]);
var grid = new Ext.grid.GridPanel({
border:false,
buttonAlign :'left',
region:'center',
loadMask: true,
store: ds,
cm: colModel,
sm: sm,
autoScroll: true,
bbar: new Ext.PagingToolbar({//增加分頁欄按鈕設置爲tbar可放置在頂部
pageSize: 20,
store: ds,
displayInfo: true,
displayMsg: '第{0} 到 {1} 條數據 共{2}條',
emptyMsg: "沒有數據"