摘要:ExtJS : Percentage Bar
[lightweight percentage bar]
減少了一些dom的使用，可以簡單用來顯示percent。
https://github.com/tfshnike/PercentageBar
CSS:
.ux-procentageBar-wrap {
position: relative;
height: 18px;
background-color: #e0e8f3;
border: 1px solid #6593cf;
overflow: hidden;
}
.ux-procentageBar-bar {
background-color: #9cbfee;
-webkit-background-size: 32px 32px;
-moz-background-size: 32px 32px;
-o-background-size: 32px 32px;
background-size: 32px 32px;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
}
.ux-procentageBar-text {
position: absolute;
padding: 1px 5px;
overflow: hidden;
left: 0;
top: 0;
}
JS:
/**
* @class Ext.ux.PercentageBar
* @extends Ext.ProgressBar
* new Ext.ux.PercentageBar({renderTo: 'el', value: 0.77, width: 300, text: '77%', animate: true})
* @cfg {Float} value A floating point value between 0 and 1 (e.g., .5, defaults to 0)
* @cfg {String} text The progress bar text (defaults to '')
* @cfg {Mixed} textEl The element to render the progress text to (defaults to the progress
* bar's internal text element)
* @cfg {String} id The progress bar element's id (defaults to an auto-generated id)
* @xtype ux_percentagebar
*/
Ext.ux.PercentageBar = Ext.extend(Ext.ProgressBar, {
/**
* @cfg {String} baseCls
* The base CSS class to apply to the progress bar's wrapper element (defaults to 'x-progress')
*/
baseCls: 'ux-procentageBar',
/**
* @cfg {Boolean} animate
* True to animate the progress bar during transitions (defaults to false)
*/
animate: false,
// private
waitTimer: null,
// private
initComponent : function(){
Ext.ux.PercentageBar.superclass.initComponent.call(this);
this.addEvents(
/**
* @event update
* Fires after each update interval
* @param {Ext.ux.PercentageBar} this
* @param {Number} value The current percent value
* @param {String} text The current percent text
*/
"update"
);
},
// private
onRender : function(ct, position){
var tpl = new Ext.Template(
'' ); this.el = position ? tpl.insertBefore(position, {cls: this.baseCls}, true) : tpl.append(ct, {cls: this.baseCls}, true); if(this.id){ this.el.dom.id = this.id; } var wrapDom = this.el.dom; this.progressBar = Ext.get(wrapDom.firstChild); if (this.textEl) { //use an external text el this.textEl = Ext.get(this.textEl); } else { //setup our internal layered text els this.textEl = Ext.get(wrapDom.childNodes[1]); this.textEl.setWidth(wrapDom.clientWidth); } this.progressBar.setHeight(wrapDom.clientHeight); }, // private afterRender : function(){ Ext.ux.PercentageBar.superclass.afterRender.call(this); if(this.value){ this.updateProgress(this.value, this.text); }else{ this.updateText(this.text); } }, /** * Updates the percentage bar value, and optionally its text. If the text argument is not specified, * any existing text value will be unchanged. To blank out existing text, pass ''. Note that even * if the progress bar value exceeds 1, it will never automatically reset -- you are responsible for * determining when the progress is complete and calling {@link #reset} to clear and/or hide the control. * @param {Float} value (optional) A floating point value between 0 and 1 (e.g., .5, defaults to 0) * @param {String} text (optional) The string to display in the progress text element (defaults to '') * @param {Boolean} animate (optional) Whether to animate the transition of the percentage bar. If this value is * not specified, the default for the class is used (default to false) * @return {Ext.ux.PercentageBar} this */ updateProgress: function(value, text, animate){ this.value = value || 0; if(text){ this.updateText(text); } if(this.rendered && !this.isDestroyed){ var w = Math.floor(value*this.el.dom.clientWidth); this.progressBar.setWidth(w, animate === true || (animate !== false && this.animate)); } this.fireEvent('update', this, value, text); return this; }, /** * Sets the size of the percentage bar. * @param {Number} width The new width in pixels * @param {Number} height The new height in pixels * @return {Ext.ux.PercentageBar} this */ setSize: function(w, h){ Ext.ux.PercentageBar.superclass.setSize.call(this, w, h); if(this.textTopEl){ var wrapDom = this.el.dom; this.textEl.setSize(wrapDom.clientWidth, wrapDom.clientHeight); } this.syncProgressBar(); return this; }, /** * Resets the percentage bar value to 0 and text to empty string. If hide = true, the percentage * bar will also be hidden (using the {@link #hideMode} property internally). * @param {Boolean} hide (optional) True to hide the percentage bar (defaults to false) * @return {Ext.ux.PercentageBar} this */ reset: function(hide){ this.updateProgress(0); this.clearTimer(); if (hide === true) { this.hide(); } return this; }, onDestroy: function() { this.clearTimer(); if (this.rendered) { Ext.destroyMembers(this, 'textEl', 'progressBar'); } Ext.ux.PercentageBar.superclass.onDestroy.call(this); } }); Ext.reg('ux_percentagebar', Ext.ux.PercentageBar);