PagingToolbar.js
/**
* @class Ext.PagingToolbar
* @extends Ext.Toolbar
* <p>A specialized toolbar that is bound to a {@link Ext.data.Store} and provides automatic paging control. This
* Component {@link Ext.data.Store#load load}s blocks of data into the Store passing parameters who's names are
* specified by the store's {@link Ext.data.Store#paramNames paramNames} property.</p>
* @constructor
* Create a new PagingToolbar
* @param {Object} config The config object
*/
Ext.PagingToolbar = Ext.extend(Ext.Toolbar, {
/**
* @cfg {Ext.data.Store} store The {@link Ext.data.Store} the paging toolbar should use as its data source (required).
*/
// holder
/***
* @cfg {Boolean} displayInfo
* True to display the displayMsg (defaults to false)
*/
// holder
/***
* @cfg {Number} pageSize
* The number of records to display per page (defaults to 20)
*/
pageSize: 20,
/**
* @cfg {String} displayMsg
* The paging status message to display (defaults to "Displaying {0} - {1} of {2}"). Note that this string is
* formatted using the braced numbers 0-2 as tokens that are replaced by the values for start, end and total
* respectively. These tokens should be preserved when overriding this string if showing those values is desired.
*/
displayMsg : 'Displaying {0} - {1} of {2}',
/**
* @cfg {String} emptyMsg
* The message to display when no records are found (defaults to "No data to display")
*/
emptyMsg : 'No data to display',
/**
* Customizable piece of the default paging text (defaults to "Page")
* @type String
*/
beforePageText : "Page",
/**
* Customizable piece of the default paging text (defaults to "of {0}"). Note that this string is
* formatted using {0} as a token that is replaced by the number of total pages. This token should be
* preserved when overriding this string if showing the total page count is desired.
* @type String
*/
afterPageText : "of {0}",
/**
* Customizable piece of the default paging text (defaults to "First Page")
* @type String
*/
firstText : "First Page",
/**
* Customizable piece of the default paging text (defaults to "Previous Page")
* @type String
*/
prevText : "Previous Page",
/**
* Customizable piece of the default paging text (defaults to "Next Page")
* @type String
*/
nextText : "Next Page",
/**
* Customizable piece of the default paging text (defaults to "Last Page")
* @type String
*/
lastText : "Last Page",
/**
* Customizable piece of the default paging text (defaults to "Refresh")
* @type String
*/
refreshText : "Refresh",
/**
* Object mapping of parameter names for load calls (defaults to {start: 'start', limit: 'limit'})
*/
paramNames : {start: 'start', limit: 'limit'},
// private
initComponent : function(){
this.addEvents(
/**
* @event change
* Fires after the active page has been changed.
* @param {Ext.PagingToolbar} this
* @param {Object} changeEvent An object that has these properties:<ul>
* <li><code>total</code> : Number <div class="sub-desc">The total number of records in the dataset as
* returned by the server</div></li>
* <li><code>activePage</code> : Number <div class="sub-desc">The current page number</div></li>
* <li><code>pages</code> : Number <div class="sub-desc">The total number of pages (calculated from
* the total number of records in the dataset as returned by the server and the current {@link #pageSize})</div></li>
* </ul>
*/
'change',
/**
* @event beforechange
* Fires just before the active page is changed.
* Return false to prevent the active page from being changed.
* @param {Ext.PagingToolbar} this
* @param {Object} beforeChangeEvent An object that has these properties:<ul>
* <li><code>start</code> : Number <div class="sub-desc">The starting row number for the next page of records to
* be retrieved from the server</div></li>
* <li><code>limit</code> : Number <div class="sub-desc">The number of records to be retrieved from the server</div></li>
* </ul>
* (note: the names of the <b>start</b> and <b>limit</b> properties are determined
* by the store's {@link Ext.data.Store#paramNames paramNames} property.)
*/
'beforechange'
);
Ext.PagingToolbar.superclass.initComponent.call(this);
this.cursor = 0;
this.bind(this.store);
},
// private
onRender : function(ct, position){
Ext.PagingToolbar.superclass.onRender.call(this, ct, position);
this.first = this.addButton({
tooltip: this.firstText,
iconCls: "x-tbar-page-first",
disabled: true,
handler: this.onClick.createDelegate(this, ["first"])
});
this.prev = this.addButton({
tooltip: this.prevText,
iconCls: "x-tbar-page-prev",
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"
}).el);
this.field.on("keydown", this.onPagingKeydown, this);
this.field.on("focus", function(){this.dom.select();});
this.field.on("blur", this.onPagingBlur, this);
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",
disabled: true,
handler: this.onClick.createDelegate(this, ["next"])
});
this.last = this.addButton({
tooltip: this.lastText,
iconCls: "x-tbar-page-last",
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
updateInfo : function(){
if(this.displayEl){
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.displayEl.update(msg);
}
},
// 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.fireEvent('change', this, d);
},
// private
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)
};
},
// private
onLoadError : function(){
if(!this.rendered){
return;
}
this.loading.enable();
},
// private
readPage : function(d){
var v = this.field.dom.value, pageNum;
if (!v || isNaN(pageNum = parseInt(v, 10))) {
this.field.dom.value = d.activePage;
return false;
}
return pageNum;
},
//private
onPagingBlur: function(e){
this.field.dom.value = this.getPageData().activePage;
},
// private
onPagingKeydown : function(e){
var k = e.getKey(), d = this.getPageData(), pageNum;
if (k == e.RETURN) {
e.stopEvent();
pageNum = this.readPage(d);
if(pageNum !== false){
pageNum = Math.min(Math.max(1, pageNum), d.pages) - 1;
this.doLoad(pageNum * this.pageSize);
}
}else if (k == e.HOME || k == e.END){
e.stopEvent();
pageNum = k == e.HOME ? 1 : d.pages;
this.field.dom.value = pageNum;
}else if (k == e.UP || k == e.PAGEUP || k == e.DOWN || k == e.PAGEDOWN){
e.stopEvent();
if(pageNum = this.readPage(d)){
var increment = e.shiftKey ? 10 : 1;
if(k == e.DOWN || k == e.PAGEDOWN){
increment *= -1;
}
pageNum += increment;
if(pageNum >= 1 & pageNum <= d.pages){
this.field.dom.value = pageNum;
}
}
}
},
// private
beforeLoad : function(){
if(this.rendered && this.loading){
this.loading.disable();
}
},
// private
doLoad : function(start){
var o = {}, pn = this.paramNames;
o[pn.start] = start;
o[pn.limit] = this.pageSize;
if(this.fireEvent('beforechange', this, o) !== false){
this.store.load({params:o});
}
},
/**
* Change the active page
* @param {Integer} page The page to display
*/
changePage: function(page){
this.doLoad(((page-1) * this.pageSize).constrain(0, this.store.getTotalCount()));
},
// private
onClick : function(which){
var store = this.store;
switch(which){
case "first":
this.doLoad(0);
break;
case "prev":
this.doLoad(Math.max(0, this.cursor-this.pageSize));
break;
case "next":
this.doLoad(this.cursor+this.pageSize);
break;
case "last":
var total = store.getTotalCount();
var extra = total % this.pageSize;
var lastStart = extra ? (total - extra) : total-this.pageSize;
this.doLoad(lastStart);
break;
case "refresh":
this.doLoad(this.cursor);
break;
}
},
/**
* Unbinds the paging toolbar from the specified {@link Ext.data.Store}
* @param {Ext.data.Store} store The data store to unbind
*/
unbind : function(store){
store = Ext.StoreMgr.lookup(store);
store.un("beforeload", this.beforeLoad, this);
store.un("load", this.onLoad, this);
store.un("loadexception", this.onLoadError, this);
this.store = undefined;
},
/**
* Binds the paging toolbar to the specified {@link Ext.data.Store}
* @param {Ext.data.Store} store The data store to bind
*/
bind : function(store){
store = Ext.StoreMgr.lookup(store);
store.on("beforeload", this.beforeLoad, this);
store.on("load", this.onLoad, this);
store.on("loadexception", this.onLoadError, this);
this.store = store;
if (store.getCount() > 0){
this.onLoad(store, null, {});
}
},
// private
onDestroy : function(){
if(this.store){
this.unbind(this.store);
}
Ext.PagingToolbar.superclass.onDestroy.call(this);
}
});
Ext.reg('paging', Ext.PagingToolbar);
Ext - Copyright © 2006-2007 Ext JS, LLC
All rights reserved.