Ext.namespace('Ext.ux.PagingToolbarEx');
Ext.ux.PagingToolbarEx = Ext.extend(Ext.PagingToolbar, {
space : ' ',
beforePageText : '',
afterPageText : '',
randomId : 0,
formArrays : function(arys, cur_page) {
for(var i=0; i<arys.length; i++) {
var page_dom = null;
if(!Ext.get('page_dom_'+this.randomId+'_'+i)) {
page_dom = Ext.get(this.addDom({
tag: 'span',
type: 'text',
id: 'page_dom_'+this.randomId+'_'+i,
html: this.space+arys[i]+this.space
}).el);
} else {
page_dom = Ext.get('page_dom_'+this.randomId+'_'+i);
}
if(page_dom) {
page_dom.dom.innerHTML = (arys[i]=='')?'':(this.space+arys[i]+this.space);
if(arys[i]!='' && arys[i]!='...' && arys[i]!=cur_page) {
page_dom.dom.style.cursor = 'pointer';
page_dom.dom.style.color = '#6294E5';
//page_dom.dom.style.fontWeight = 'bold';
}
if(arys[i] == cur_page) {
page_dom.dom.style.cursor = '';
page_dom.dom.style.color = '#000000';
}
page_dom.removeAllListeners();
if(arys[i] == '...' || arys[i] == '' || arys[i]==cur_page) {
page_dom.on('click',function() {});
} else if(typeof(arys[i]) == 'number') {
page_dom.on('click',function(e,k) {
var cur_page = parseInt(k.textContent || k.innerText);
var total = this.store.getTotalCount();
var pages = Math.ceil(total/this.pageSize);
this.doLoad((cur_page-1) * this.pageSize);
}, this);
}
}
}
},
formPage : function() {
//this.cursor 0,1,2...
//var cur_page = Math.ceil((this.cursor+this.pageSize)/this.pageSize) 1,2,3...
//this.cursor+1, this.cursor+count, this.store.getTotalCount() 11-20 of 45
//var pages = Math.ceil(this.store.getTotalCount()/this.pageSize) total 45 pages
var cur_page = Math.ceil((this.cursor+this.pageSize)/this.pageSize);
var total = this.store.getTotalCount();
var pages = Math.ceil(total/this.pageSize);
var arrays = [];
if(pages <= 10) {
for(var i=0; i<11; i++) {
if(i<pages) arrays.push(i+1);
else arrays.push('');
}
} else {
if(cur_page <= 6) {
for(var i=0; i<11; i++) {
if(i<=8) arrays.push(i+1);
else if(i==9) arrays.push('...');
else if(i==10) arrays.push(pages);
}
} else if(cur_page > 6 && cur_page < (pages-5)) {
for(var i=0; i<11; i++) {
if(i==0) arrays.push(i+1);
else if(i==1 || i==9) arrays.push('...');
else if(i>1 && i<9) arrays.push(cur_page-(5-i));
else if(i==10) arrays.push(pages);
}
} else if(cur_page >= (pages-5)) {
for(var i=0; i<11; i++) {
if(i==0) arrays.push(i+1);
else if(i==1) arrays.push('...');
else arrays.push(pages-(10-i));
}
}
}
this.formArrays(arrays, cur_page);
},
// private
onRender : function(ct, position){
this.randomId = Math.random();
Ext.PagingToolbar.superclass.onRender.call(this, ct, position);
this.first = this.addButton({
tooltip: this.firstText,
//iconCls: "x-tbar-page-first",
hide: true,
text: '',
disabled: true,
handler: this.onClick.createDelegate(this, ["first"])
});
this.prev = this.addButton({
tooltip: this.prevText,
//iconCls: "x-tbar-page-prev",
text: '<span style="color:#6294E5"><< Previous</span>',
disabled: true,
handler: this.onClick.createDelegate(this, ["prev"])
});
this.addSeparator();
this.add(this.beforePageText);
this.field = Ext.get(this.addDom({
//tag: "input",
//type: "text",
//size: "3",
//value: "1",
//cls: "x-tbar-page-number"
tag: "span",
type: "text",
html: ''
}).el);
for(var i=0; i<11; i++) {
this.addDom({
tag: 'span',
type: 'text',
id: 'page_dom_'+this.randomId+'_'+i,
html: ''
})
}
this.field.on("keydown", this.onPagingKeydown, this);
this.field.on("focus", function(){this.dom.select();});
this.afterTextEl = this.addText(String.format(this.afterPageText, 1));
this.field.setHeight(18);
this.addSeparator();
this.next = this.addButton({
tooltip: this.nextText,
//iconCls: "x-tbar-page-next",
text: '<span style="color:#6294E5">Next >></span>',
style: 'color:#77AAFF',
disabled: true,
handler: this.onClick.createDelegate(this, ["next"])
});
this.last = this.addButton({
tooltip: this.lastText,
//iconCls: "x-tbar-page-last",
hide: true,
text: '',
disabled: true,
handler: this.onClick.createDelegate(this, ["last"])
});
this.addSeparator();
this.loading = this.addButton({
tooltip: this.refreshText,
iconCls: "x-tbar-loading",
handler: this.onClick.createDelegate(this, ["refresh"])
});
if(this.displayInfo){
this.displayEl = Ext.fly(this.el.dom).createChild({cls:'x-paging-info'});
}
if(this.dsLoaded){
this.onLoad.apply(this, this.dsLoaded);
}
},
// private
onLoad : function(store, r, o){
if(!this.rendered){
this.dsLoaded = [store, r, o];
return;
}
this.cursor = o.params ? o.params[this.paramNames.start] : 0;
var d = this.getPageData(), ap = d.activePage, ps = d.pages;
this.afterTextEl.el.innerHTML = String.format(this.afterPageText, d.pages);
this.field.dom.value = ap;
this.first.setDisabled(ap == 1);
this.prev.setDisabled(ap == 1);
this.next.setDisabled(ap == ps);
this.last.setDisabled(ap == ps);
this.loading.enable();
this.updateInfo();
this.formPage();
}
});
Ext.reg('pagingtoolbarex', Ext.ux.PagingToolbarEx);
- 大小: 24.3 KB
分享到:
相关推荐
参考: Ext.PagingToolbar.js 如有BUG还请各位提出或留言. 附件中有图片, 一看就知道. 用法: var grid = new Ext.grid.GridPanel({ bbar: new Ext.PM3PagingToolbar({ store : store, displayInfo : true, ...
Ext.PagingToolbar运行时不能动态设置每页条数的功能,此控件就可以实现这些功能,包含下拉选择分页条数和滑动选择分页条数
extjs的pagingtoolbar 点击下一页时,出现store的load时间,但是只有start和limit这两个参数,这样就出现了,点击下一页的时候,查询出 的结果和条件不符合。虽然可以通过一次查处所有符合条件的记录,然后根据传入...
NULL 博文链接:https://fuyu365-163-com.iteye.com/blog/1703697
NULL 博文链接:https://sonckchi.iteye.com/blog/1958861
非传统分页工具. 简单说明下: ...参考: Ext.PagingToolbar.js 因为我开发测试完这个分页工具后, 电脑上显示刚好是15:00, 所以取名: PM3PagingToolbar 如有BUG还请各位提出或留言. 附件中有图片, 一看就知道.
Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码
ext PagingToolbar 带参数的翻页
extjs 分页 从dao到action
extjs的pagingtoolbar 点击下一页时,出现store的load时间,但是只有start和limit这两个参数,这样就出现了,点击下一页的时候,查询出 的结果和条件不符合。虽然可以通过一次性查出所有记录的方法解决,但是我更...
var pagebar = new Ext.PagingToolbar({ store:store, pageSize:limit, displayInfo:true, displayMsg:'本页显示第{0}条到第{1}条的记录,一共{2}条。', emptyMsg:'没有记录' }); //有参数的分页 Ext....
很方便的分页控件,通过事件处理分页 PagingToolbar.mxml PagingEvent.as
Service类(RecordServiceImpl),Service接口(RecordService),分页类(ListRange.java),dwr自带(engine.js),ext自带(ext-all.js,ext-base.js,ext-all.css),(分页底部工具栏)PagingToolbar.js
在修改或删除grid中的数据时,删除成功后需要重新load数据,并继续停留在当前页,使用PagingToolbar的cursor属性获取当前的页码开始的记录数
在extjs中,类Ext.PagingToolbar封装了关于分页的操作,该类从Toolbar继承而来,单从名字上看,我们也猜得出这是一个能够处理分页的工具栏。好吧,那我们就来看看如何构造这样一个工具栏吧。PagingToolbar类的构造...
Ext.onReady(function() { store3 = new Ext.data.JsonStore({ autoDestroy: true, ...var pagingToolbar = new Ext.PagingToolbar({ emptyMsg : "没有数据", displayInfo : true, displayMsg : "显示从{0}条数据到{
6.1.7 扩展选择器 / 248 6.1.8 ext.domquery的使用方法 / 249 6.1.9 ext js选择器的总结 / 252 6.2 获取单一元素:ext.dom.element / 252 6.2.1 从错误开始 / 252 6.2.2 使用ext.get获取元素 / 253 6.2.3 ...