paramNames, 是一个PagingToolbar的public property
默认是有 start, limit 这两个参数名字，如果想改变参数名字，可以使用ptb.paramNames = { start: 'p1', limit: 'p2' }
以下这几个函数和grid结合可以实现搜索和分页
function resizeable() {
new Ext.Resizable("grid", {
handles: 's',
/* 'n' north, 's' south,'e' east,'w' west,'nw' northwest,
'sw' southwest,'se' southeast,'ne' northeast,'all'
*/
pinned:true, //总是显示,false,就当鼠标移上时显示
dynamic: true
});
}
// 的两个按纽和一个input 处理grid数据的搜索和清除
function butHander(searchName, blClean) {
if( blClean )
store.load( {
params: { start: 0, limit: 10, id: '0' }
// 因为数据库id是1开始的，设置为0,就当于是空列表了
} );
else
store.load( {
params: {start: 0, limit: 10, name: searchName}
// 通过searchName参数查 name为searchName的记录
} );
}
// 这个store用于grid和PagingToolbar
var store = new Ext.data.Store({ // 记住不能是 SimpleStore
fields: ['id', 'name', 'occupation', 'date1', 'image'],
url: './testaction.do?method=search',
reader: new Ext.data.XmlReader(
{
totalRecords: 'TotalCount', // xml 对应
record: 'Item',
id: 'id'
},
[ {name:'id', mapping: 'id'}, {name:'name', mapping: 'name'}, {name:'occupation'}, {name:'date1'}, {name:'image'}]
)
});
store.addListener('load', function(st, rds, opts) {
for( var c=0; c<rds.length; c++ ) {
var d = Date.parseDate(rds[c].get('date1'), 'Y-m-d');
rds[c].set('date1', d); // 有一个date型的数据,转化为js的date型
}
resizeable(); // 假设gridPanel是可以resize的，在这里重新设一次
});
// 在grid中添加 bbar, 在bbar 为显示分页栏,也可以不放在bbdr中,直接放到panel中显示,
除了Store,bar与grid没有什么关联
bbar: new Ext.PagingToolbar({
id: 'ptbar',
store: store, // 与和GridPanel的store应该一样
pageSize: 10, // 默认是25,会给sotre的url传送 limit=10的参数
displayInfo: true, // 显示信息
displayMsg: 'Topics {0} - {1} of {2}',
// beforePageText: '', // 设置 page文字出现位置前面的字, defaults to "Page"
// afterPageText: '', //设置 page文字出现位置后面的字, defaults to "of %0"
//firstText: '',
//prevText: '',
//nextText: '',
//lastText: '',
//refreshText: '',
// {0} grid中的第一条的编号, {1} grid中最后一条的编号, {2} 总的记录数，与XML中的totalRecords对应
emptyMsg: "No topics to display" // 如果grid没有记录，显示的信息
})