    /**
     * Plugin for displaying a progressbar inside of a paging toolbar
     * instead of plain text.
     */
    Ext.define('Ext.ux.ProgressBarPager', {

        requires: ['Ext.ProgressBar'],
        /**
         * @cfg {Number} width
         * <p>The default progress bar width.  Default is 225.</p>
        */
        width   : 225,
        /**
         * @cfg {String} defaultText
        * <p>The text to display while the store is loading.  Default is 'Loading...'</p>
         */
        defaultText    : 'Loading...',
        /**
         * @cfg {Object} defaultAnimCfg
         * <p>A {@link Ext.fx.Anim Ext.fx.Anim} configuration object.</p>
         */
        defaultAnimCfg : {
    		duration: 1000,
    		easing: 'bounceOut'
    	},

        /**
         * Creates new ProgressBarPager.
         * @param {Object} config Configuration options
         */
        constructor : function(config) {
            if (config) {
                Ext.apply(this, config);
            }
        },
        //public
        init : function (parent) {
            var displayItem;
            if (parent.displayInfo) {
                this.parent = parent;

                displayItem = parent.child("#displayItem");
                if (displayItem) {
                    parent.remove(displayItem, true);
                }

                this.progressBar = Ext.create('Ext.ProgressBar', {
                    text    : this.defaultText,
                    width   : this.width,
                    animate : this.defaultAnimCfg,
                    style: {
                        cursor: 'pointer'
                    },
                    listeners: {
                        el: {
                            scope: this,
                            click: this.handleProgressBarClick
                        }
                    }
                });

                parent.displayItem = this.progressBar;

                parent.add(parent.displayItem);
                Ext.apply(parent, this.parentOverrides);
            }
        },
        // private
        // This method handles the click for the progress bar
        handleProgressBarClick : function(e){
            var parent = this.parent,
                displayItem = parent.displayItem,
                box = this.progressBar.getBox(),
                xy = e.getXY(),
                position = xy[0]- box.x,
                pages = Math.ceil(parent.store.getTotalCount() / parent.pageSize),
                newPage = Math.max(Math.ceil(position / (displayItem.width / pages)), 1);

            parent.store.loadPage(newPage);
        },

        // private, overriddes
        parentOverrides  : {
            // private
            // This method updates the information via the progress bar.
            updateInfo : function(){
                if(this.displayItem){
                    var count = this.store.getCount(),
                        pageData = this.getPageData(),
                        message = count === 0 ?
                        this.emptyMsg :
                        Ext.String.format(
                            this.displayMsg,
                            pageData.fromRecord, pageData.toRecord, this.store.getTotalCount()
                        ),
                        percentage = pageData.pageCount > 0 ? (pageData.currentPage / pageData.pageCount) : 0;

                    this.displayItem.updateProgress(percentage, message, this.animate || this.defaultAnimConfig);
                }
            }
        }
    });