分页工具栏PagingToolBar的使用

最新推荐文章于 2016-11-04 11:22:40 发布

最新推荐文章于 2016-11-04 11:22:40 发布 · 363 阅读

文章标签：

#EXT

本文介绍如何使用ExtJS库中的PagingToolbar组件，并展示了三种不同的配置方式以实现自定义分页功能，包括显示信息的格式化及额外操作按钮的添加。

使用1

Ext.csap.PagingToolBar = Ext.extend(Ext.PagingToolbar, {
displayInfo : true,
displayMsg : "显示第 {0} 条到 {1} 条记录，一共 {2} 条记录",
emptyMsg : '没有记录',
initComponent : function() {
Ext.csap.PagingToolBar.superclass.initComponent.call(this);
},
beforeDestroy : function() {
Ext.csap.PagingToolBar.superclass.beforeDestroy.apply(this, arguments);
}
});

使用2

new Ext.PagingToolbar({
store : storeMgr,
pageSize : 15,
displayInfo : true,
displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条记录',
emptyMsg : '没有记录'
})

使用3

自定义分页（多了一个按钮）
new Ext.PagingToolbar({
store: store,
pageSize: 6,
displayInfo: true,
displayMsg: "本页显示第{0}条到第{1}条的记录,一共{2}条",
emptyMsg: "没有记录",
items:["-",{
icon: "../extjs/resources/images/default/dd/drop-yes.gif",//图标
cls: "x-btn-text-icon", //按钮文字前为放图标留的一段空隙
pressed: true,
enableToggle:true,
text: '隐藏备注',
cls: 'x-btn-text-icon details',
toggleHandler: function(btn, pressed){
var view = grid.getView();
if(pressed){
btn.setText("隐藏备注");
}else{
btn.setText("显示备注");
}
view.showPreview = pressed;
view.refresh();
}
}]
})