Results 1 to 2 of 2

Thread: Ext.PagingToolbar override

  1. #1
    Sencha User
    Join Date
    Apr 2009
    Vote Rating

    Default Ext.PagingToolbar override


    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
    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">
    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) {
            }) : '', = 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 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(, true);
        beforeLoad: function() {
            if (this.rendered && this.refresh) {
            // added param values to the beforeLoad event as suggested by Condor at
  'start', this.cursor);
  '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


    Attached Files Attached Files
    Last edited by rob1308; 19 Jul 2010 at 2:28 AM. Reason: Adding screenshot

  2. #2
    Sencha User
    Join Date
    Apr 2015
    Vote Rating


    Hi,Implemted paging tool bar override, but getting a error as 'Uncaught TypeError: undefined is not a function' at line 'var pagingItems = [this.first = new T.Button({'


Similar Threads

  1. How to override pagingtoolbar for prev,next buttons
    By Rammynampati in forum Ext 3.x: Help & Discussion
    Replies: 16
    Last Post: 23 Jan 2011, 4:02 AM
  2. Override PagingToolbar parameters
    By defcon1 in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 5 Feb 2010, 5:55 AM
  3. [Solved]How to override "proxy" for pagingtoolbar????
    By Rammynampati in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 20 Oct 2009, 4:33 AM
  4. override Ext.override
    By thaiat in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 13 May 2009, 6:40 AM
  5. override Ext.override?
    By cboden in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 15 May 2008, 7:48 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts