1.建立页面:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>03.grid</title>
//引入必要文件
<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/resources/css/ext-all.css" />
<script type="text/javascript" src="http://www.cnblogs.com/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
//定义表头
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
//定义数据
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'Pager.php'}),
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'root'
}, [
{name: 'id'},
{name: 'name'},
{name: 'descn'}
])
});
//定义表格
var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
autoHeight: true,
store: store,
cm: cm,
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: store,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "没有记录"
})
});
store.load({params:{start:0,limit:10}}); //初始化数据显示
});
</script>
</head>
<body>
<script type="text/javascript" src="../examples.js"></script>
<div id="grid" style="height:265px;"></div>
</body>
</html>
2.PHP:
<?php
//返回Json格式数据,可以从数据库中查询获得,分页时传人两个参数:start和limit,可以使用$_POST[‘start’]和$_POST[‘limit’]获得,此略
$s=’{totalProperty:100,root:[{id:0,name:’name0’,descn:’descn0’},{id:1,name:’name1’,descn:’descn1’},{id:2,name:’name2’,descn:’descn2’}]}’;
echo $s;
?>