因此，现在几乎所有的grid控件都会支持分页功能。extjs也不例外，它对分页也提供了强大而方便的支持，使得我们在分页处理上可以得心应手。
在extjs中，类Ext.PagingToolbar封装了关于分页的操作，该类从Toolbar继承而来，单从名字上看，我们也猜得出这是一个能够处理分页的工具栏。好吧，那我们就来看看如何构造这样一个工具栏吧。PagingToolbar类的构造函数需要一个json对象来进行配置，在js中，使用json对象来提供所需参数非常方便，这样使得我们可以只填写感兴趣的参数，并且不必关心参数的顺序。我们的分页工具栏常用的配置参数包括：
pageSize：每页显示的记录数，默认是20。
store：这个和grid里边的store参数是一样的，因为分页也需要和数据打交道，所以需要这个参数。
displayMsg：显示的分页状态信息，例如“第{0}-第{1}条，一共{2}条"，注意一定要有大括号括起来的0，1，2，分别代表当前页的开始，结束，还有全部的记录数，其它的字自己随便写吧，只要读起来通顺就可以了，该信息会显示在分页工具栏的右侧。
displayInfo：是否显示displayMsg，默认是不显示。
emptyMsg：没有记录时显示的文本。
items：要在工具栏上显示的项，我们在构造之后再来看一下都可以有哪些项。
好了，现在可以构造我们的分页工具栏了，不过因为我们的参数里边需要一个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'
})
});
{
"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/images/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']);
}
})
extjs DataReader、JsonReader、XmlReader的构造方法
extjs3.0帮助文档：DataReader(Objectmeta,Array/ObjectrecordType)CreateanewDataReader参数:meta:ObjectMetadataconfigurationoptions(implementation-specific).元数据配置选项(...-...)recordType
ExtJS Window 最小化的一种方法
下面是通过重新它的minimize函数来实现的一种最小化方法：HTML：inputtype="button"id="btn"value="OpenWin"onclick="openWin();"/divid="divWin"/divahref="javascript:openWin();"id="aRe
ExtJS的FieldSet的column列布局
以下是自己扩展的FieldSet：ME.Base.FieldSet=Ext.extend(Ext.form.FieldSet,{layout:'column',fieldSetItems:[],autoScroll:false,defaults:{layout:'form',labelAlign:'right',labelWidth:65,columnWidth