View Full Version : Ext.PagingToolbar override

19 Jul 2010, 12:33 AM

Hi guys,

Have come up with an override to the Ext.PagingToolbar which includes a sliding pager within the items set of the PagingToolbar.

With the override - PagingToolbars will be default have a slider which is "greedy" taking up any remaning space after user items etc have been added.

Width can be specified explicitly for the slider in the PagingToolbar's configs.

Sample usage:

bbar: new Ext.PagingToolbar({
pageSize: 20,
store: store,
displayInfo: true,
sliderWidth: 150
To NOT include a slider by default within the PagingToolbar - you can specify "slider:false" in the configs.

Sample usage:

bbar: new Ext.PagingToolbar({
pageSize: 20,
store: store,
displayInfo: true,
The slider inherits the beforePageText and afterPageText values and hence the "tips" on the slider can be localized like the parent PagingToolbar.

Having seen a post by Condor at http://www.sencha.com/forum/showthread.php?38809-PagingToolbar-with-improvements&highlight=paging+slider
in relation to Evant's PagingToolbar enhancements I have also amended the beforeLoad method to set store baseParams to only return correct info on store.load()

Comments and corrections are very welcome. This is my first extension/override and there's most likely something I haven't done correctly/elegantly!!

There is some custom CSS required shown below:

<style type="text/css">



</style>The override is below:

* Override for default Ext.PagingToolbar to include slider.
* @author Rob Schmuecker (Ext forumId rob1308)
* @date July 19, 2010
* Makes all paging bars load with an included slider.
* The slider is "greedy" by default and will fill all remaning space in the Ext.PagingToolbar once user items etc have been added.
* To specify a width for the slider specify sliderWidth in the Ext.PagingToolbar in integer format.
* To create the Ext.PagingToolbar without the slider specify "slider:false" in the config of the Ext.PagingToolbar
* Slider Tips inherit default or user defined beforePageText and afterPageText values for localization

Ext.override(Ext.PagingToolbar, {
//Specify default value for slider
slider: true,

initComponent: function() {
var T = Ext.Toolbar;
var pagingItems = [this.first = new T.Button({
tooltip: this.firstText,
overflowText: this.firstText,
iconCls: 'x-tbar-page-first',
disabled: true,
handler: this.moveFirst,
scope: this
}), this.prev = new T.Button({
tooltip: this.prevText,
overflowText: this.prevText,
iconCls: 'x-tbar-page-prev',
disabled: true,
handler: this.movePrevious,
scope: this
}), '-', this.beforePageText, this.inputItem = new Ext.form.NumberField({
cls: 'x-tbar-page-number',
allowDecimals: false,
allowNegative: false,
enableKeyEvents: true,
selectOnFocus: true,
submitValue: false,
listeners: {
scope: this,
keydown: this.onPagingKeyDown,
blur: this.onPagingBlur
}), this.afterTextItem = new T.TextItem({
text: String.format(this.afterPageText, 1)
}), '-',

// Check if slider is true and if so add it to the default Ext.PagingToolbar items
this.slider ? this.sliderItem = new Ext.Slider({
width: this.sliderWidth ? this.sliderWidth: undefined,
ctCls: this.sliderWidth ? 'ux_paging_slider': 'ux_paging_slider_greedy',
minValue: 1,
maxValue: 1,
sliderBeforePageText: this.beforePageText,
sliderAfterPageText: this.afterPageText,
plugins: new Ext.slider.Tip({
getText: function(thumb) {
// Do some formatting of the Ext.PagingToolbar's beforePageText and afterPageText for the slider tip.
return String.format(thumb.slider.sliderBeforePageText + ' <b>{0}</b> ' + (thumb.slider.sliderAfterPageText.match(/(\{0\})/g) ? thumb.slider.sliderAfterPageText.match(/[^{]*/) + '<b>{1}</b>': thumb.slider.sliderAfterPageText), thumb.value, thumb.slider.maxValue);
listeners: {
changecomplete: function(s, v) {
}) : '', this.next = new T.Button({
tooltip: this.nextText,
overflowText: this.nextText,
iconCls: 'x-tbar-page-next',
disabled: true,
handler: this.moveNext,
scope: this
}), this.last = new T.Button({
tooltip: this.lastText,
overflowText: this.lastText,
iconCls: 'x-tbar-page-last',
disabled: true,
handler: this.moveLast,
scope: this
}), '-', this.refresh = new T.Button({
tooltip: this.refreshText,
overflowText: this.refreshText,
iconCls: 'x-tbar-loading',
handler: this.doRefresh,
scope: this

var userItems = this.items || this.buttons || [];
if (this.prependButtons) {
this.items = userItems.concat(pagingItems);
} else {
this.items = pagingItems.concat(userItems);
delete this.buttons;
if (this.displayInfo) {
this.items.push(this.displayItem = new T.TextItem({}));
* @event change
* Fires after the active page has been changed.
* @param {Ext.PagingToolbar} this
* @param {Object} pageData 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>
* @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} params An object hash of the parameters which the PagingToolbar will send when
* loading the required page. This will contain:<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>
* <p>(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.)</p>
* <p>Parameters may be added as required in the event handler.</p>
this.on('afterlayout', this.onFirstLayout, this, {
single: true
function(pb, data) {
if (this.slider) {
this.sliderItem.syncThumb(); // force sync slider thumb when maxValue changes but value doesn't change
this.cursor = 0;
this.bindStore(this.store, true);

beforeLoad: function() {
if (this.rendered && this.refresh) {
// added param values to the beforeLoad event as suggested by Condor at http://www.sencha.com/forum/showthread.php?38809-PagingToolbar-with-improvements&highlight=paging+slider
this.store.setBaseParam('start', this.cursor);
this.store.setBaseParam('limit', this.pageSize);

});Example usage can be see by extracting the attached zip file into the examples/grid directory and then navigating to yourhost/examples/grid/paging_with_slider.html
The example here just adds the override to the standard Paging Grid Example and therefore the slider will be "greedy" and take up all remaining space.

Tested in FF 3+ IE 6,7,8