/** * Plugin for displaying a progressbar inside of a paging toolbar * instead of plain text. */Ext.define('Ext.ux.ProgressBarPager', { alias: 'plugin.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); } }, 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); } }, /** * This method handles the click for the progress bar * @private */ handleProgressBarClick: function(e) { var parent = this.parent, displayItem = parent.displayItem, box = this.progressBar.getBox(), xy = e.getXY(), position = xy[0] - box.x, store = parent.store, pageSize = parent.pageSize || store.pageSize, pages = Math.ceil(store.getTotalCount() / pageSize), newPage = Math.max(Math.ceil(position / (displayItem.width / pages)), 1); store.loadPage(newPage); }, /** * @private */ parentOverrides: { /** * This method updates the information via the progress bar. * @private */ updateInfo: function() { if (this.displayItem) { // eslint-disable-next-line vars-on-top 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 ); } } }});