extjs 学习笔记 四 带分页的grid

复制代码 代码如下:

var store = new Ext.data.JsonStore({
root: 'topics',
totalProperty: 'totalCount',
idProperty: 'threadid',
remoteSort: true,
fields: [
'title', 'forumtitle', 'forumid', 'author',
{ name: 'replycount', type: 'int' },
{ name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp' },
'lastposter', 'excerpt'
],
// 因为跨域，所以使用ScriptTagProxy，在同一个域里边用HttpProxy
proxy: new Ext.data.ScriptTagProxy({
url: 'http://extjs.com/forum/topics-browse-remote.php'
})
});

复制代码 代码如下:

{
"totalCount":10000, //对应totalProperty属性的值
"topics":[ //对应root户型的值
//这里是json对象的集合，每一个对象的属性
//需要和fields里边name属性的值对应
//观察url返回给我们的数据可以更清楚的看明白这一点
]
}

复制代码 代码如下:

var pagingToolbar = new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "没有文章",
items: [
'-', {
pressed: true,
enableToggle: true,
text: 'Show Preview',
cls: 'x-btn-text-icon details',
toggleHandler: function(btn, pressed) {
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
}]
});

复制代码 代码如下:

///<reference path="vswd-ext_2.0.2.js" />
/**//*
*作者：大笨
*日期：2009-10-13
*版本：1.0
*博客地址：http://yage.cnblogs.com
*/
Ext.BLANK_IMAGE_URL = '/extjs/resources/imageshttps://img.qb5200.com/download-x/default/s.gif';
Ext.onReady(function() {
//构造store
var store = new Ext.data.JsonStore({
root: 'topics',
totalProperty: 'totalCount',
idProperty: 'threadid',
remoteSort: true,
fields: [
'title', 'forumtitle', 'forumid', 'author',
{ name: 'replycount', type: 'int' },
{ name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp' },
'lastposter', 'excerpt'
],
// 因为跨域，所以使用ScriptTagProxy，在同一个域里边用HttpProxy
proxy: new Ext.data.ScriptTagProxy({
url: 'http://extjs.com/forum/topics-browse-remote.php'
})
});
store.setDefaultSort("lastpost", "DESC"); //设置默认的排序列和方向
//构造带分页功能的工具栏
var pagingToolbar = new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: '第{0}-第{1}条，一共{2}条',
emptyMsg: "No topics to display",
items: [
'-', {
pressed: true,
enableToggle: true,
text: '预览',
cls: 'x-btn-text-icon details',
toggleHandler: function(btn, pressed) {
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
}]
});
//构造带有分页工具栏的grid
var grid = new Ext.grid.GridPanel({
renderTo:"grid",
width: 700,
height: 500,
title: '带分页功能的grid',
store: store,
trackMouseOver: false,
disableSelection: true,
loadMask: true,
// grid的列
columns: [{
id: 'topic',
header: "主题",
dataIndex: 'title',
width: 420,
renderer: renderTopic,
sortable: true
}, {
header: "作者",
dataIndex: 'author',
width: 100,
hidden: true,
sortable: true
}, {
header: "回复数",
dataIndex: 'replycount',
width: 70,
align: 'right',
sortable: true
}, {
id: 'last',
header: "最后回复",
dataIndex: 'lastpost',
width: 150,
renderer: renderLast,
sortable: 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';
}
},
//在顶部的分页工具栏
//tbar: pagingToolbar,
// 在底部的分页工具栏
bbar: pagingToolbar
});
// 加载数据
store.load({ params: { start: 0, limit: 25} });
// 主题列的renderer函数
function renderTopic(value, p, record) {
return String.format(
'<b><a href="http://extjs.com/forum/showthread.php?t={2}" href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
value, record.data.forumtitle, record.id, record.data.forumid);
}
//最后回复列的renderer函数
function renderLast(value, p, r) {
return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
}
})