You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
3.1 KiB
JavaScript
104 lines
3.1 KiB
JavaScript
2 years ago
|
/**
|
||
|
|
* @class Ext.ux.ProgressBarPager
|
||
|
|
* @extends Object
|
||
|
|
* Plugin for displaying a progressbar inside of a paging toolbar instead of plain text
|
||
|
|
* @constructor
|
||
|
|
* Create a new ProgressBarPager
|
||
|
|
* @param {Object} config Configuration options
|
||
|
|
*/
|
||
|
|
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'
|
||
|
|
},
|
||
|
|
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|