ExtJS中的Grid分页

1.建立页面:

//引入必要文件
        <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;

posted on 2009-06-26 16:13 garfieldtom 阅读(506) 评论(0) 编辑收藏举报