ExtJS中的Grid分页
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;
?>
轉載于:https://www.cnblogs.com/GarfieldTom/archive/2009/06/26/1511775.html
總結
以上是生活随笔為你收集整理的ExtJS中的Grid分页的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： visual studio 2005中生
- 下一篇： Struts+Spring+Hibern