ExtJS 自定义分页控件---- PM3PagingToolbar.js

(function() { var T = Ext.Toolbar; Ext.PM3PagingToolbar=Ext.extend(Ext.Toolbar, { emptyMsg: '没有数据显示.', displayMsg : '显示 {0} - {1} 总数 {2}', prevText: '上一页', nextText: '下一页', targetPageText: '跳转目标页', /** * 对称长度 */ symmetryLength: 3, initComponent: function() { this.userItems = this.items || this.buttons || []; var pagingItems = [ this.prev = new T.Button({ itemId: 'prev', tooltip: this.prevText, overflowText: this.prevText, iconCls: 'x-tbar-page-prev', disabled: true, handler: this.movePrevious, scope: this }), this.next=new T.Button({ itemId: 'next', tooltip: this.nextText, overflowText: this.nextText, iconCls: 'x-tbar-page-next', disabled: true, handler: this.moveNext, scope: this }) ]; this.items = pagingItems.concat(this.userItems); if(this.displayInfo){ this.items.push('->'); this.items.push(this.displayItem = new T.TextItem({})); } Ext.PM3PagingToolbar.superclass.initComponent.call(this); this.cursor = 0; if(isNaN(this.symmetryLength) || this.symmetryLength < 0) { this.symmetryLength = 0; } this.bindStore(this.store, true); }, bindStore: function(store, initial) { if(!initial && this.store) { if(store !== this.store && this.store.autoDestroy){ this.store.destroy(); }else{ this.store.un('load', this.onLoad, this); } if(!store){ this.store = null; } } if(store) { store = Ext.StoreMgr.lookup(store); store.on({ scope: this, load: this.onLoad }); doLoad = true; this.pageSize = store.baseParams['limit']; } this.store = store; }, onLoad: function(store, r, o) { if(!this.rendered){ this.dsLoaded = [store, r, o]; return ; } var p = this.getParams(); this.cursor = (o.params && o.params[p.start]) ? o.params[p.start] : 0; var d = this.getPageData(), ap = d.activePage, ps = d.pages;; this.prev.setDisabled(ap == 1); this.next.setDisabled(ap == ps); this.updateInfo(); this.buildPages(); }, getParams: function() { return this.paramNames || this.store.paramNames; }, doLoad: function(start) { var o = {}, pn = this.getParams(); o[pn.start] = start; o[pn.limit] = this.pageSize; this.store.load({params:o}); }, movePrevious: function() { this.doLoad(Math.max(0, this.cursor-this.pageSize)); }, moveNext: function() { this.doLoad(this.cursor+this.pageSize); }, moveTo: function(page) { this.doLoad((page-1)*this.pageSize); }, updateInfo : function(){ if(this.displayItem){ var count = this.store.getCount(); var msg = count == 0 ? this.emptyMsg : String.format( this.displayMsg, this.cursor+1, this.cursor+count, this.store.getTotalCount() ); this.displayItem.setText(msg); } }, getPageData : function(){ var total = this.store.getTotalCount(); return { total : total, activePage : Math.ceil((this.cursor+this.pageSize)/this.pageSize), pages : total < this.pageSize ? 1 : Math.ceil(total/this.pageSize) }; }, buildPages: function() { this.removePages(); var d = this.getPageData(); //d.pages = 100; var pageCursor = d.activePage; var leftStart = d.activePage - this.symmetryLength - 1; var prevIndex = this.getItemIndex('prev'); //左边 123456789 while(pageCursor > leftStart && pageCursor > 0) { if(pageCursor == d.activePage) { this.insert(prevIndex+1, {xtype: 'tbtext', text: '<span style="color: red;cursor: pointer;font-size: 14px;">'+pageCursor+'</span>'}); } else { this.insert(prevIndex+1, new T.Button({text: '<span style="font-size: 14px;">'+pageCursor.toString()+'</span>', page: pageCursor, handler: function(t, e) { this.moveTo(t.page); }, scope: this})); } pageCursor--; } if(pageCursor >= 1) { if(pageCursor > 1 && this.symmetryLength > 0) { this.insert(prevIndex+1, {itemId: 'frontIgnore', width: 32, tooltip: this.targetPageText, overflowText: this.targetPageText, text: '<span style="cursor: pointer;">......</span>', handler: function(t, e) { if(this.getItemIndex('backIgnore') > -1) { this.items.get(this.getItemIndex('backIgnore')).setVisible(true); } var frontIndex = this.getItemIndex(t.getItemId()); this.insert(frontIndex, this.getInputItem()); t.setVisible(false); this.getInputItem().focus(true); }, scope: this}); pageCursor = 1; } this.insert(prevIndex+1, {text: '<span style="font-size: 14px;">'+pageCursor.toString()+'</span>', handler: function() { this.moveTo(1); }, scope: this}); } // 右边 pageCursor = d.activePage + 1; var rightEnd = d.activePage + this.symmetryLength; var nextIndex = this.getItemIndex('next'); while(pageCursor <= rightEnd && pageCursor <= d.pages) { this.insert(nextIndex++, {text: '<span style="font-size: 14px;">'+pageCursor.toString()+'</span>', page: pageCursor, handler: function(t, e) { this.moveTo(t.page); }, scope: this}); pageCursor++; } if(pageCursor <= d.pages) { if(pageCursor < d.pages && this.symmetryLength > 0) { this.insert(nextIndex++, {itemId: 'backIgnore', width: 32, tooltip: this.targetPageText, overflowText: this.targetPageText, text: '<span style="cursor: pointer;">......</span>', handler: function(t, e) { if(this.getItemIndex('frontIgnore') > -1) { this.items.get(this.getItemIndex('frontIgnore')).setVisible(true); } var backIndex = this.getItemIndex(t.getItemId()); this.insert(backIndex, this.getInputItem()); t.setVisible(false); this.getInputItem().focus(true); }, scope: this}); pageCursor = d.pages; } this.insert(nextIndex++, {text: '<span style="font-size: 14px;">'+pageCursor.toString()+'</span>', handler: function() { this.moveTo(d.pages); }, scope: this}); } }, removePages: function() { var start = this.getItemIndex('prev'), end = this.getItemIndex('next'); this.items.each(function(item, i) { if(i > start && i < end) { this.remove(item); } }, this); this.inputItem = null; }, getItemIndex: function(itemId) { var index = 0; this.items.each(function(item, i) { if(item.getItemId()==itemId) { index = i; return false; } }); return index; }, getInputItem: function() { if(!this.inputItem) { this.inputItem = new Ext.form.NumberField({ cls: 'x-tbar-page-number', allowDecimals: false, allowNegative: false, enableKeyEvents: true, selectOnFocus: true, submitValue: false, width: 32, listeners: { scope: this, keydown: this.onPagingKeyDown, blur: function() { this.removeInputItem(); } } }); } return this.inputItem; }, removeInputItem: function() { this.remove(this.getInputItem()); this.inputItem = null; if(this.getItemIndex('frontIgnore') > -1) { this.items.get(this.getItemIndex('frontIgnore')).setVis