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();
}
});
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();
}
});
程序代码
<?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).'})';
?>
$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).'})';
?>
程序代码
<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>
<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>