ext paging.js 分页时的调用的写法。

最新推荐文章于 2025-05-14 22:27:35 发布

iteye_14323

最新推荐文章于 2025-05-14 22:27:35 发布

阅读量298

点赞数

分类专栏： appfuse 文章标签： EXT MySQL CSS JavaScript PHP ViewUI

appfuse 专栏收录该内容

19 篇文章

订阅专栏

paging.js，分页时的调用的写法。

js 代码

Ext.onReady(function(){
// create the Data Store
var ds = new Ext.data.Store({
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.ScriptTagProxy({
url: 'http://extjs.com/forum/topics-remote.php'
}),
// create reader that reads the Topic records
reader: new Ext.data.JsonReader({
root: 'topics',
totalProperty: 'totalCount',
id: 'post_id'
}, [
{name: 'title', mapping: 'topic_title'},
{name: 'author', mapping: 'author'},
{name: 'totalPosts', mapping: 'topic_replies', type: 'int'},
{name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
{name: 'excerpt', mapping: 'post_text'}
]),
// turn on remote sorting
remoteSort: true
});
// pluggable renders
function renderTopic(value, p, record){
return String.format('<b>{0}</b>{1}', value, record.data['excerpt']);
}
function renderTopicPlain(value){
return String.format('<b><i>{0}</i></b>', value);
}
function renderLast(value, p, r){
return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['author']);
}
function renderLastPlain(value){
return value.dateFormat('M j, Y, g:i a');
}
// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store
var cm = new Ext.grid.ColumnModel([{
id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
header: "Topic",
dataIndex: 'title',
width: 490,
renderer: renderTopic,
css: 'white-space:normal;'
},{
header: "Author",
dataIndex: 'author',
width: 100,
hidden: true // 隐藏列
},{
id: 'last',
header: "Last Post",
dataIndex: 'lastPost',
width: 150,
renderer: renderLast
}]);
// create the editor grid
var grid = new Ext.grid.Grid('topic-grid', {
ds: ds,
cm: cm,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
enableColLock:false,
loadMask: true //是否显示正在加载
});
// make the grid resizable, do before render for better performance
var rz = new Ext.Resizable('topic-grid', {
wrap:true,
minHeight:100,
pinned:true,
handles: 's'
});
rz.on('resize', grid.autoSize, grid);
// render it
grid.render();
var gridFoot = grid.getView().getFooterPanel(true);
// 在grid底部增加分页按钮
var paging = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: 25,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
});
// 增加可以查看详细信息的按钮
paging.add('-', {
pressed: true,
enableToggle:true,
text: 'Detailed View',
cls: 'x-btn-text-icon details',
toggleHandler: toggleDetails
});
// trigger the data store load
// ds.load({params:{start:0, limit:5}, extraParams:{dept:'test', viaParam:true}});
//ds.load({params:{start:0, limit:5, department:'test', viaPara:true}});
//ds.load({params:{start:0, limit:5}});
//查询时需要用到的参数
// ds.on('beforeload', function() {
// ds.baseParams = {
// dept: 'test111',
// viaParam: true
// };
// });
// 传入start和limit参数以初始化数据
ds.load({params:{start:0, limit:25}});
function toggleDetails(btn, pressed){
cm.getColumnById('topic').renderer = pressed ? renderTopic : renderTopicPlain;
cm.getColumnById('last').renderer = pressed ? renderLast : renderLastPlain;
grid.getView().refresh();
}
});

Grid的分页必须依靠服务端（Server Side）来划分好每一页的数据才可以完成。

本例中的服务端语言是PHP,数据库是MySQL，用来导出一些随机的数据。下列脚本的作用是，获取我们想要的数据，同时这些数据是已分好页的数据。分页的参数是由Page Toolbar传入的变量limit和start所决定的。
例如： http://extjs.com/forum/topics-remote.php?start=0&limit=1

php 代码

$link = mysql_pconnect("test-db.vinylfox.com", "test", "testuser")
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).'})';