ExtJS 分页数据表

ir - DESC 排序方式 ASC为升序

limit -

25 记录数

sort-

lastpost 排序字段

start -

0 开始记录

 

 

$data[] = array("threadid" => 26816 ...);

$pack = array(
"totalCount" => count($data),
"topics" => $data
);

echo json_encode($pack);

*/

reader: new Ext.data.JsonReader({
root: 'topics',
totalProperty: 'totalCount',   // 数据总跳数，用于计算分多少页
id: 'threadid',       // 数据需要有ID
fields: [   // 字段列表
'title', 'forumtitle', 'forumid', 'author',
{name: 'replycount', type: 'int'},
{name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
'lastposter', 'excerpt'   // lastpost传过来的是timestamp格式
]
}),
// turn on remote sorting   在远程进行排序
remoteSort: true
});
store.setDefaultSort('lastpost', 'desc'); // 默认排序方式

// pluggable renders 特殊的字段显示Render
function renderTopic(value, p, record){ // value为字段当前值, p ? , record为整个记录
return String.format(    // String使用 {0},{1}作为占位幅
'<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.forumtitle, record.id, record.data.forumid);
}
function renderLast(value, p, r){
return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
}

// 列显示模型 (Column Model)

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: 420,
renderer: renderTopic // 使用特殊的Renderer
},{
header: "Author",
dataIndex: 'author',
width: 100,
hidden: true // 默认隐藏
},{
header: "Replies",
dataIndex: 'replycount',
width: 70,
align: 'right' // 对齐方式
},{
id: 'last',
header: "Last Post",
dataIndex: 'lastpost',
width: 150,
renderer: renderLast // 特殊render
}]);

// by default columns are sortable
cm.defaultSortable = true;

// Grid Panel

var grid = new Ext.grid.GridPanel({
el:'topic-grid',    // DiV容器显示GridPanel, 在HTML中<div id="topic-grid"></div>
width:700,
height:500,
title:'ExtJS.com - Browse Forums',
store: store,
cm: cm,
trackMouseOver:false,
sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),   // 不能Select ?
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: 25,   // 每页条数
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',    // 右下角提示
emptyMsg: "No topics to display",   // 无记录
items:[   // show preview 显示按钮
'-', {
pressed: true,
enableToggle:true,
text: 'Show Preview',
cls: 'x-btn-text-icon details',
toggleHandler: toggleDetails   // handler函数
}]
})
});

 

// render it
grid.render();

// trigger the data store load
store.load({params:{start:0, limit:25}});    // 加载初始数据

function toggleDetails(btn, pressed){
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
});

JS代码注释：

Ext.onReady(function(){

// create the Data Store
var store = 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({
proxy: new Ext.data.HttpProxy({
url: 'debug.php'         // 后端PHP
}),

// create reader that reads the Topic records

/* 后端PHP输出格式

 

PHP 接收的$_REQUEST参数