/** * 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 */ 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); } } }});