Ext2.1 分页Grid
时间:2008-06-03
来源:互联网
paging.js
复制内容到剪贴板
var store = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url: 'http://10.19.8.233/ext/examples/grid/test.php'
}),
reader: new Ext.data.JsonReader({
root: 'topics',
totalProperty: 'totalCount',
id: 'bid',
fields: [
{name: 'bid', mapping:'bid', type: 'int'},
{name: 'bname', mapping:'bname', type: 'string'}
]
}),
remoteSort: true
});
store.setDefaultSort('bid', 'desc');
function renderTopic(value, p, record){
return String.format(
'<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
value, record.data.bname, record.id, record.data.bid);
}
function renderLast(value, p, r){
return String.format('{0}<br/>by {1}', r.data['bid'], r.data['bname']);
}
var cm = new Ext.grid.ColumnModel([{
id: 'topic',
header: "bid",
dataIndex: 'bid',
width: 420
},{
header: "bname",
dataIndex: 'bname',
width: 100,
renderer: renderTopic
}]);
cm.defaultSortable = true;
var grid = new Ext.grid.GridPanel({
el:'topic-grid',
width:700,
height:500,
title:'呜呜呜呜呜呜呜呜呜',
store: store,
cm: cm,
trackMouseOver:false,
sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
loadMask: true,
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:true,
getRowClass : function(record, rowIndex, p, store){
if(this.showPreview){
p.body = '<p>'+record.data.excerpt+'</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
},
bbar: new Ext.PagingToolbar({
pageSize: 5,
store: store,
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();
store.load({params:{start:0, limit:5}});
function toggleDetails(btn, pressed){
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
});
test.html
代码:
Ext.onReady(function(){var store = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url: 'http://10.19.8.233/ext/examples/grid/test.php'
}),
reader: new Ext.data.JsonReader({
root: 'topics',
totalProperty: 'totalCount',
id: 'bid',
fields: [
{name: 'bid', mapping:'bid', type: 'int'},
{name: 'bname', mapping:'bname', type: 'string'}
]
}),
remoteSort: true
});
store.setDefaultSort('bid', 'desc');
function renderTopic(value, p, record){
return String.format(
'<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
value, record.data.bname, record.id, record.data.bid);
}
function renderLast(value, p, r){
return String.format('{0}<br/>by {1}', r.data['bid'], r.data['bname']);
}
var cm = new Ext.grid.ColumnModel([{
id: 'topic',
header: "bid",
dataIndex: 'bid',
width: 420
},{
header: "bname",
dataIndex: 'bname',
width: 100,
renderer: renderTopic
}]);
cm.defaultSortable = true;
var grid = new Ext.grid.GridPanel({
el:'topic-grid',
width:700,
height:500,
title:'呜呜呜呜呜呜呜呜呜',
store: store,
cm: cm,
trackMouseOver:false,
sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
loadMask: true,
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:true,
getRowClass : function(record, rowIndex, p, store){
if(this.showPreview){
p.body = '<p>'+record.data.excerpt+'</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
},
bbar: new Ext.PagingToolbar({
pageSize: 5,
store: store,
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();
store.load({params:{start:0, limit:5}});
function toggleDetails(btn, pressed){
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
});
复制内容到剪贴板
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
<title></title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="paging.js"></script>
</head>
<body>
<div id="topic-grid"></div>
</body>
</html>
服务端
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
<title></title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="paging.js"></script>
</head>
<body>
<div id="topic-grid"></div>
</body>
</html>
复制内容到剪贴板
$link = mysql_pconnect("localhost", "root", "") or die("Could not connect");
mysql_select_db("test") or die("Could not select database");
$link = @mysql_db_query("test", "set names utf8");
$sql_count = "SELECT * FROM book";
$sql = $sql_count . " order by ".$_GET['sort']." ".$_GET['dir']." 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;
}
//print_r(json_encode($arr));
Echo $_GET['callback'].'({"totalCount":"'.$rows.'","topics":'.json_encode($arr).'})';
?>
[ 本帖最后由 wz_910 于 2008-6-3 15:34 编辑 ] 代码:
<?$link = mysql_pconnect("localhost", "root", "") or die("Could not connect");
mysql_select_db("test") or die("Could not select database");
$link = @mysql_db_query("test", "set names utf8");
$sql_count = "SELECT * FROM book";
$sql = $sql_count . " order by ".$_GET['sort']." ".$_GET['dir']." 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;
}
//print_r(json_encode($arr));
Echo $_GET['callback'].'({"totalCount":"'.$rows.'","topics":'.json_encode($arr).'})';
?>
作者: wz_910 发布时间: 2008-06-03
数据库应该为utf8的否则json无效。
作者: wz_910 发布时间: 2008-06-03
兄弟,曲高和寡呀,呵呵
作者: lei0535 发布时间: 2008-07-22
引用:
原帖由 lei0535 于 2008-7-22 12:09 发表兄弟,曲高和寡呀,呵呵
作者: wz_910 发布时间: 2008-08-01
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
-
如何安装mysql8.0
阅读:31
-
Word快速设置标题样式步骤详解
阅读:28
-
20+道必知必会的Vue面试题(附答案解析)
阅读:37
-
HTML如何制作表单
阅读:22
-
百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
-
ET文件格式和XLS格式文件之间如何转化?
阅读:24
-
react和vue的区别及优缺点是什么
阅读:121
-
支付宝人脸识别如何关闭?
阅读:21
-
腾讯微云怎么修改照片或视频备份路径?
阅读:28