Ext学习之Grid JSON分页

 

1、js代码

程序代码
Ext.onReady(function(){
    var ds = new Ext.data.Store({
  // HttpProxy should be used here
        proxy: new Ext.data.ScripttagProxy({
            url: 'http://localhost/kydepot/include/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 cm = new Ext.grid.ColumnModel([{
     id: 'name',
           header: "Name",
           dataIndex: 'employee_name',
           width: 100
        },{
           header: "title",
           dataIndex: 'job_title',
           width: 170
        },{
           header: "Hire eate",
           dataIndex: 'hire_date',
           width: 70,
     renderer: Ext.util.Format.dateRenderer('n/j/y')
        },{
           header: "Active",
           dataIndex: 'is_active',
           width: 50
        }]);
        cm.defaultSortable = true;
    var grid = new Ext.grid.GridPanel({
        store: ds,
        cm: cm,
        renderto:'grid-paging',
        title:'ExtJS.com - Browse Forums',
        width:600,
        height:400,
        bbar: new Ext.Pagingtoolbar({
            pageSize: 8,
            store: ds,
            displayInfo: true,
            displayMsg: 'eisplaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display",
            items:[
                '-', {
                pressed: true,
                enabletoggle:true,
                text: 'Show Preview',
                cls: 'x-btn-text-icon details',
                toggleHandler: toggleeetails
            }]
        })
    });
    grid.render();
    ds.load({params:{start:0, limit:8}});
 function toggleeetails(btn, pressed){
        var view = grid.getView();
        view.showPreview = pressed;
        view.refresh();
    }
});
2、服务器数据
程序代码
<?php
$link = mysql_pconnect("localhost", "root", "37863127") or die("Could not connect");
mysql_select_db("test") or die("Could not select database");
$sql_count = "SELECt id, name, title, hire_date, active FROM random_employee_data";
$sql = $sql_count . " LIMIt ".$_GEt['start'].", ".$_GEt['limit'];
$rs_count = mysql_query($sql_count);
$rows = mysql_num_rows($rs_count);
$rs = mysql_query($sql);
while($obj = mysql_fetch_object($rs))
{
 $arr[] = $obj;
}
echo $_GEt['callback'].'({"total":"'.$rows.'","results":'.json_encode($arr).'})';
?>
3、前端显示
程序代码
<html>
 <head>
  <title>Paging Grid Example</title>
  <script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="../ext/ext-all.js"></script>
  <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" />
 
  <script type="text/javascript" src="grid-paging.js"></script>
 </head>
 <body>
 
  <div id="grid-paging"></div>
 
 </body>
</html>
大功告成!!!!!
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值