Ext学习之Grid JSON分页

来源:百度文库 编辑:神马文学网 时间:2024/05/05 09:55:33
突然觉得编程真不是人人都能做的,一次次的编译不通过,一遍遍的检查代码,抓住问题所在的喜悦远小于重复多次的挫折,真不是人受,尤其对于一个未曾接触过的js类库,没有标准,没有可供衡量的依据,一处不过,处处卡壳。。。
今天一夜什么事情都没做,只是一个小小的Grid 分页竟然调试了我8个小时,惭愧,惭愧。。
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 Date",
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: 'Displaying 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: toggleDetails
}]
})
});
grid.render();
ds.load({params:{start:0, limit:8}});
function toggleDetails(btn, pressed){
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
});
2、服务器数据
$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、前端显示


Paging Grid Example









大功告成!!!!!