中间件编程

开发平台：

JavaScript

cmp-foundation-debug.js：源码内容

if(!this.disabled){
var delta = e.getWheelDelta();
if(delta > 0){
this.showPrevMonth();
} else if(delta < 0){
this.showNextMonth();
}
}
},
// private
handleDateClick : function(e, t){
e.stopEvent();
if(!this.disabled && t.dateValue && !Ext.fly(t.parentNode).hasClass('x-date-disabled')){
this.setValue(new Date(t.dateValue));
this.fireEvent('select', this, this.value);
}
},
// private
selectToday : function(){
if(this.todayBtn && !this.todayBtn.disabled){
this.setValue(new Date().clearTime());
this.fireEvent('select', this, this.value);
}
},
// private
update : function(date, forceRefresh){
var vd = this.activeDate, vis = this.isVisible();
this.activeDate = date;
if(!forceRefresh && vd && this.el){
var t = date.getTime();
if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
this.cells.removeClass('x-date-selected');
this.cells.each(function(c){
if(c.dom.firstChild.dateValue == t){
c.addClass('x-date-selected');
if(vis){
Ext.fly(c.dom.firstChild).focus(50);
}
return false;
}
});
return;
}
}
var days = date.getDaysInMonth();
var firstOfMonth = date.getFirstDateOfMonth();
var startingPos = firstOfMonth.getDay()-this.startDay;
if(startingPos <= this.startDay){
startingPos += 7;
}
var pm = date.add('mo', -1);
var prevStart = pm.getDaysInMonth()-startingPos;
var cells = this.cells.elements;
var textEls = this.textNodes;
days += startingPos;
// convert everything to numbers so it's fast
var day = 86400000;
var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
var today = new Date().clearTime().getTime();
var sel = date.clearTime().getTime();
var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
var ddMatch = this.disabledDatesRE;
var ddText = this.disabledDatesText;
var ddays = this.disabledDays ? this.disabledDays.join('') : false;
var ddaysText = this.disabledDaysText;
var format = this.format;
if(this.showToday){
var td = new Date().clearTime();
var disable = (td < min || td > max ||
(ddMatch && format && ddMatch.test(td.dateFormat(format))) ||
(ddays && ddays.indexOf(td.getDay()) != -1));
if(!this.disabled){
this.todayBtn.setDisabled(disable);
this.todayKeyListener[disable ? 'disable' : 'enable']();
}
}
var setCellClass = function(cal, cell){
cell.title = '';
var t = d.getTime();
cell.firstChild.dateValue = t;
if(t == today){
cell.className += ' x-date-today';
cell.title = cal.todayText;
}
if(t == sel){
cell.className += ' x-date-selected';
if(vis){
Ext.fly(cell.firstChild).focus(50);
}
}
// disabling
if(t < min) {
cell.className = ' x-date-disabled';
cell.title = cal.minText;
return;
}
if(t > max) {
cell.className = ' x-date-disabled';
cell.title = cal.maxText;
return;
}
if(ddays){
if(ddays.indexOf(d.getDay()) != -1){
cell.title = ddaysText;
cell.className = ' x-date-disabled';
}
}
if(ddMatch && format){
var fvalue = d.dateFormat(format);
if(ddMatch.test(fvalue)){
cell.title = ddText.replace('%0', fvalue);
cell.className = ' x-date-disabled';
}
}
};
var i = 0;
for(; i < startingPos; i++) {
textEls[i].innerHTML = (++prevStart);
d.setDate(d.getDate()+1);
cells[i].className = 'x-date-prevday';
setCellClass(this, cells[i]);
}
for(; i < days; i++){
var intDay = i - startingPos + 1;
textEls[i].innerHTML = (intDay);
d.setDate(d.getDate()+1);
cells[i].className = 'x-date-active';
setCellClass(this, cells[i]);
}
var extraDays = 0;
for(; i < 42; i++) {
textEls[i].innerHTML = (++extraDays);
d.setDate(d.getDate()+1);
cells[i].className = 'x-date-nextday';
setCellClass(this, cells[i]);
}
this.mbtn.setText(this.monthNames[date.getMonth()] + ' ' + date.getFullYear());
if(!this.internalRender){
var main = this.el.dom.firstChild;
var w = main.offsetWidth;
this.el.setWidth(w + this.el.getBorderWidth('lr'));
Ext.fly(main).setWidth(w);
this.internalRender = true;
// opera does not respect the auto grow header center column
// then, after it gets a width opera refuses to recalculate
// without a second pass
if(Ext.isOpera && !this.secondPass){
main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + 'px';
this.secondPass = true;
this.update.defer(10, this, [date]);
}
}
},
// private
beforeDestroy : function() {
if(this.rendered){
this.keyNav.disable();
this.keyNav = null;
Ext.destroy(
this.leftClickRpt,
this.rightClickRpt,
this.monthPicker,
this.eventEl,
this.mbtn,
this.todayBtn
);
}
}
/**
* @cfg {String} autoEl @hide
*/
});
Ext.reg('datepicker', Ext.DatePicker);
/** * @class Ext.LoadMask * A simple utility class for generically masking elements while loading data. If the {@link #store} * config option is specified, the masking will be automatically synchronized with the store's loading * process and the mask element will be cached for reuse. For all other elements, this mask will replace the * element's Updater load indicator and will be destroyed after the initial load. * <p>Example usage:</p> *<pre><code> // Basic mask: var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."}); myMask.show(); </code></pre> * @constructor * Create a new LoadMask * @param {Mixed} el The element or DOM node, or its id * @param {Object} config The config object */ Ext.LoadMask = function(el, config){ this.el = Ext.get(el); Ext.apply(this, config); if(this.store){ this.store.on('beforeload', this.onBeforeLoad, this); this.store.on('load', this.onLoad, this); this.store.on('exception', this.onLoad, this); this.removeMask = Ext.value(this.removeMask, false); }else{ var um = this.el.getUpdater(); um.showLoadIndicator = false; // disable the default indicator um.on('beforeupdate', this.onBeforeLoad, this); um.on('update', this.onLoad, this); um.on('failure', this.onLoad, this); this.removeMask = Ext.value(this.removeMask, true); } }; Ext.LoadMask.prototype = { /** * @cfg {Ext.data.Store} store * Optional Store to which the mask is bound. The mask is displayed when a load request is issued, and * hidden on either load sucess, or load fail. */ /** * @cfg {Boolean} removeMask * True to create a single-use mask that is automatically destroyed after loading (useful for page loads), * False to persist the mask element reference for multiple uses (e.g., for paged data widgets). Defaults to false. */ /** * @cfg {String} msg * The text to display in a centered loading message box (defaults to 'Loading...') */ msg : 'Loading...', /** * @cfg {String} msgCls * The CSS class to apply to the loading message element (defaults to "x-mask-loading") */ msgCls : 'x-mask-loading', /** * Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false) * @type Boolean */ disabled: false, /** * Disables the mask to prevent it from being displayed */ disable : function(){ this.disabled = true; }, /** * Enables the mask so that it can be displayed */ enable : function(){ this.disabled = false; }, // private onLoad : function(){ this.el.unmask(this.removeMask); }, // private onBeforeLoad : function(){ if(!this.disabled){ this.el.mask(this.msg, this.msgCls); } }, /** * Show this LoadMask over the configured Element. */ show: function(){ this.onBeforeLoad(); }, /** * Hide this LoadMask. */ hide: function(){ this.onLoad(); }, // private destroy : function(){ if(this.store){ this.store.un('beforeload', this.onBeforeLoad, this); this.store.un('load', this.onLoad, this); this.store.un('exception', this.onLoad, this); }else{ var um = this.el.getUpdater(); um.un('beforeupdate', this.onBeforeLoad, this); um.un('update', this.onLoad, this); um.un('failure', this.onLoad, this); } } };/**
* @class Ext.Slider
* @extends Ext.BoxComponent
* Slider which supports vertical or horizontal orientation, keyboard adjustments,
* configurable snapping, axis clicking and animation. Can be added as an item to
* any container. Example usage:
<pre><code>
new Ext.Slider({
renderTo: Ext.getBody(),
width: 200,
value: 50,
increment: 10,
minValue: 0,
maxValue: 100
});
</code></pre>
*/
Ext.Slider = Ext.extend(Ext.BoxComponent, {
/**
* @cfg {Number} value The value to initialize the slider with. Defaults to minValue.
*/
/**
* @cfg {Boolean} vertical Orient the Slider vertically rather than horizontally, defaults to false.
*/
vertical: false,
/**
* @cfg {Number} minValue The minimum value for the Slider. Defaults to 0.
*/
minValue: 0,
/**
* @cfg {Number} maxValue The maximum value for the Slider. Defaults to 100.
*/
maxValue: 100,
/**
* @cfg {Number/Boolean} decimalPrecision.
* <p>The number of decimal places to which to round the Slider's value. Defaults to 0.</p>
* <p>To disable rounding, configure as <tt><b>false</b></tt>.</p>
*/
decimalPrecision: 0,
/**
* @cfg {Number} keyIncrement How many units to change the Slider when adjusting with keyboard navigation. Defaults to 1. If the increment config is larger, it will be used instead.
*/
keyIncrement: 1,
/**
* @cfg {Number} increment How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'.
*/
increment: 0,
// private
clickRange: [5,15],
/**
* @cfg {Boolean} clickToChange Determines whether or not clicking on the Slider axis will change the slider. Defaults to true
*/
clickToChange : true,
/**
* @cfg {Boolean} animate Turn on or off animation. Defaults to true
*/
animate: true,
/**
* True while the thumb is in a drag operation
* @type boolean
*/
dragging: false,
// private override
initComponent : function(){
if(!Ext.isDefined(this.value)){
this.value = this.minValue;
}
Ext.Slider.superclass.initComponent.call(this);
this.keyIncrement = Math.max(this.increment, this.keyIncrement);
this.addEvents(
/**
* @event beforechange
* Fires before the slider value is changed. By returning false from an event handler,
* you can cancel the event and prevent the slider from changing.
* @param {Ext.Slider} slider The slider
* @param {Number} newValue The new value which the slider is being changed to.
* @param {Number} oldValue The old value which the slider was previously.
*/
'beforechange',
/**
* @event change
* Fires when the slider value is changed.
* @param {Ext.Slider} slider The slider
* @param {Number} newValue The new value which the slider has been changed to.
*/
'change',
/**
* @event changecomplete
* Fires when the slider value is changed by the user and any drag operations have completed.
* @param {Ext.Slider} slider The slider
* @param {Number} newValue The new value which the slider has been changed to.
*/
'changecomplete',
/**
* @event dragstart
* Fires after a drag operation has started.
* @param {Ext.Slider} slider The slider
* @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
*/
'dragstart',
/**
* @event drag
* Fires continuously during the drag operation while the mouse is moving.
* @param {Ext.Slider} slider The slider
* @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
*/
'drag',
/**
* @event dragend
* Fires after the drag operation has completed.
* @param {Ext.Slider} slider The slider
* @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
*/
'dragend'
);
if(this.vertical){
Ext.apply(this, Ext.Slider.Vertical);
}
},
// private override
onRender : function(){
this.autoEl = {
cls: 'x-slider ' + (this.vertical ? 'x-slider-vert' : 'x-slider-horz'),
cn:{cls:'x-slider-end',cn:{cls:'x-slider-inner',cn:[{cls:'x-slider-thumb'},{tag:'a', cls:'x-slider-focus', href:"#", tabIndex: '-1', hidefocus:'on'}]}}
};
Ext.Slider.superclass.onRender.apply(this, arguments);
this.endEl = this.el.first();
this.innerEl = this.endEl.first();
this.thumb = this.innerEl.first();
this.halfThumb = (this.vertical ? this.thumb.getHeight() : this.thumb.getWidth())/2;
this.focusEl = this.thumb.next();
this.initEvents();
},
// private override
initEvents : function(){
this.thumb.addClassOnOver('x-slider-thumb-over');
this.mon(this.el, {
scope: this,
mousedown: this.onMouseDown,
keydown: this.onKeyDown
});
this.focusEl.swallowEvent("click", true);
this.tracker = new Ext.dd.DragTracker({
onBeforeStart: this.onBeforeDragStart.createDelegate(this),
onStart: this.onDragStart.createDelegate(this),
onDrag: this.onDrag.createDelegate(this),
onEnd: this.onDragEnd.createDelegate(this),
tolerance: 3,
autoStart: 300
});
this.tracker.initEl(this.thumb);
this.on('beforedestroy', this.tracker.destroy, this.tracker);
},
// private override
onMouseDown : function(e){
if(this.disabled) {return;}
if(this.clickToChange && e.target != this.thumb.dom){
var local = this.innerEl.translatePoints(e.getXY());
this.onClickChange(local);
}
this.focus();
},
// private
onClickChange : function(local){
if(local.top > this.clickRange[0] && local.top < this.clickRange[1]){
this.setValue(Ext.util.Format.round(this.reverseValue(local.left), this.decimalPrecision), undefined, true);
}
},
// private
onKeyDown : function(e){
if(this.disabled){e.preventDefault();return;}
var k = e.getKey();
switch(k){
case e.UP:
case e.RIGHT:
e.stopEvent();
if(e.ctrlKey){
this.setValue(this.maxValue, undefined, true);
}else{
this.setValue(this.value+this.keyIncrement, undefined, true);
}
break;
case e.DOWN:
case e.LEFT:
e.stopEvent();
if(e.ctrlKey){
this.setValue(this.minValue, undefined, true);
}else{
this.setValue(this.value-this.keyIncrement, undefined, true);
}
break;
default:
e.preventDefault();
}
},
// private
doSnap : function(value){
if(!this.increment || this.increment == 1 || !value) {
return value;
}
var newValue = value, inc = this.increment;
var m = value % inc;
if(m != 0){
newValue -= m;
if(m * 2 > inc){
newValue += inc;
}else if(m * 2 < -inc){
newValue -= inc;
}
}
return newValue.constrain(this.minValue, this.maxValue);
},
// private
afterRender : function(){
Ext.Slider.superclass.afterRender.apply(this, arguments);
if(this.value !== undefined){
var v = this.normalizeValue(this.value);
if(v !== this.value){
delete this.value;
this.setValue(v, false);
}else{
this.moveThumb(this.translateValue(v), false);
}
}
},
// private
getRatio : function(){
var w = this.innerEl.getWidth();
var v = this.maxValue - this.minValue;
return v == 0 ? w : (w/v);
},
// private
normalizeValue : function(v){
v = this.doSnap(v);
v = Ext.util.Format.round(v, this.decimalPrecision);
v = v.constrain(this.minValue, this.maxValue);
return v;
},
/**
* Programmatically sets the value of the Slider. Ensures that the value is constrained within
* the minValue and maxValue.
* @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue)
* @param {Boolean} animate Turn on or off animation, defaults to true
*/
setValue : function(v, animate, changeComplete){
v = this.normalizeValue(v);
if(v !== this.value && this.fireEvent('beforechange', this, v, this.value) !== false){
this.value = v;
this.moveThumb(this.translateValue(v), animate !== false);
this.fireEvent('change', this, v);
if(changeComplete){
this.fireEvent('changecomplete', this, v);
}
}
},
// private
translateValue : function(v){
var ratio = this.getRatio();
return (v * ratio)-(this.minValue * ratio)-this.halfThumb;
},
reverseValue : function(pos){
var ratio = this.getRatio();
return (pos+this.halfThumb+(this.minValue * ratio))/ratio;
},
// private
moveThumb: function(v, animate){
if(!animate || this.animate === false){
this.thumb.setLeft(v);
}else{
this.thumb.shift({left: v, stopFx: true, duration:.35});
}
},
// private
focus : function(){
this.focusEl.focus(10);
},
// private
onBeforeDragStart : function(e){
return !this.disabled;
},
// private
onDragStart: function(e){
this.thumb.addClass('x-slider-thumb-drag');
this.dragging = true;
this.dragStartValue = this.value;
this.fireEvent('dragstart', this, e);
},
// private
onDrag: function(e){
var pos = this.innerEl.translatePoints(this.tracker.getXY());
this.setValue(Ext.util.Format.round(this.reverseValue(pos.left), this.decimalPrecision), false);
this.fireEvent('drag', this, e);
},
// private
onDragEnd: function(e){
this.thumb.removeClass('x-slider-thumb-drag');
this.dragging = false;
this.fireEvent('dragend', this, e);
if(this.dragStartValue != this.value){
this.fireEvent('changecomplete', this, this.value);
}
},
// private
onResize : function(w, h){
this.innerEl.setWidth(w - (this.el.getPadding('l') + this.endEl.getPadding('r')));
this.syncThumb();
},
//private
onDisable: function(){
Ext.Slider.superclass.onDisable.call(this);
this.thumb.addClass(this.disabledClass);
if(Ext.isIE){
//IE breaks when using overflow visible and opacity other than 1.
//Create a place holder for the thumb and display it.
var xy = this.thumb.getXY();
this.thumb.hide();
this.innerEl.addClass(this.disabledClass).dom.disabled = true;
if (!this.thumbHolder){
this.thumbHolder = this.endEl.createChild({cls: 'x-slider-thumb ' + this.disabledClass});
}
this.thumbHolder.show().setXY(xy);
}
},
//private
onEnable: function(){
Ext.Slider.superclass.onEnable.call(this);
this.thumb.removeClass(this.disabledClass);
if(Ext.isIE){
this.innerEl.removeClass(this.disabledClass).dom.disabled = false;
if (this.thumbHolder){
this.thumbHolder.hide();
}
this.thumb.show();
this.syncThumb();
}
},
/**
* Synchronizes the thumb position to the proper proportion of the total component width based
* on the current slider {@link #value}. This will be called automatically when the Slider
* is resized by a layout, but if it is rendered auto width, this method can be called from
* another resize handler to sync the Slider if necessary.
*/
syncThumb : function(){
if(this.rendered){
this.moveThumb(this.translateValue(this.value));
}
},
/**
* Returns the current value of the slider
* @return {Number} The current value of the slider
*/
getValue : function(){
return this.value;
}
});
Ext.reg('slider', Ext.Slider);
// private class to support vertical sliders
Ext.Slider.Vertical = {
onResize : function(w, h){
this.innerEl.setHeight(h - (this.el.getPadding('t') + this.endEl.getPadding('b')));
this.syncThumb();
},
getRatio : function(){
var h = this.innerEl.getHeight();
var v = this.maxValue - this.minValue;
return h/v;
},
moveThumb: function(v, animate){
if(!animate || this.animate === false){
this.thumb.setBottom(v);
}else{
this.thumb.shift({bottom: v, stopFx: true, duration:.35});
}
},
onDrag: function(e){
var pos = this.innerEl.translatePoints(this.tracker.getXY());
var bottom = this.innerEl.getHeight()-pos.top;
this.setValue(this.minValue + Ext.util.Format.round(bottom/this.getRatio(), this.decimalPrecision), false);
this.fireEvent('drag', this, e);
},
onClickChange : function(local){
if(local.left > this.clickRange[0] && local.left < this.clickRange[1]){
var bottom = this.innerEl.getHeight()-local.top;
this.setValue(this.minValue + Ext.util.Format.round(bottom/this.getRatio(), this.decimalPrecision), undefined, true);
}
}
};/**
* @class Ext.ProgressBar
* @extends Ext.BoxComponent
* <p>An updateable progress bar component. The progress bar supports two different modes: manual and automatic.</p>
* <p>In manual mode, you are responsible for showing, updating (via {@link #updateProgress}) and clearing the
* progress bar as needed from your own code. This method is most appropriate when you want to show progress
* throughout an operation that has predictable points of interest at which you can update the control.</p>
* <p>In automatic mode, you simply call {@link #wait} and let the progress bar run indefinitely, only clearing it
* once the operation is complete. You can optionally have the progress bar wait for a specific amount of time
* and then clear itself. Automatic mode is most appropriate for timed operations or asynchronous operations in
* which you have no need for indicating intermediate progress.</p>
* @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 progress
*/
Ext.ProgressBar = Ext.extend(Ext.BoxComponent, {
/**
* @cfg {String} baseCls
* The base CSS class to apply to the progress bar's wrapper element (defaults to 'x-progress')
*/
baseCls : 'x-progress',
/**
* @cfg {Boolean} animate
* True to animate the progress bar during transitions (defaults to false)
*/
animate : false,
// private
waitTimer : null,
// private
initComponent : function(){
Ext.ProgressBar.superclass.initComponent.call(this);
this.addEvents(
/**
* @event update
* Fires after each update interval
* @param {Ext.ProgressBar} this
* @param {Number} The current progress value
* @param {String} The current progress text
*/
"update"
);
},
// private
onRender : function(ct, position){
var tpl = new Ext.Template(
'<div class="{cls}-wrap">',
'<div class="{cls}-inner">',
'<div class="{cls}-bar">',
'<div class="{cls}-text">',
'<div> </div>',
'</div>',
'</div>',
'<div class="{cls}-text {cls}-text-back">',
'<div> </div>',
'</div>',
'</div>',
'</div>'
);
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 inner = this.el.dom.firstChild;
this.progressBar = Ext.get(inner.firstChild);
if(this.textEl){
//use an external text el
this.textEl = Ext.get(this.textEl);
delete this.textTopEl;
}else{
//setup our internal layered text els
this.textTopEl = Ext.get(this.progressBar.dom.firstChild);
var textBackEl = Ext.get(inner.childNodes[1]);
this.textTopEl.setStyle("z-index", 99).addClass('x-hidden');
this.textEl = new Ext.CompositeElement([this.textTopEl.dom.firstChild, textBackEl.dom.firstChild]);
this.textEl.setWidth(inner.offsetWidth);
}
this.progressBar.setHeight(inner.offsetHeight);
},
// private
afterRender : function(){
Ext.ProgressBar.superclass.afterRender.call(this);
if(this.value){
this.updateProgress(this.value, this.text);
}else{
this.updateText(this.text);
}
},
/**
* Updates the progress 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 progress bar. If this value is
* not specified, the default for the class is used (default to false)
* @return {Ext.ProgressBar} this
*/
updateProgress : function(value, text, animate){
this.value = value || 0;
if(text){
this.updateText(text);
}
if(this.rendered){
var w = Math.floor(value*this.el.dom.firstChild.offsetWidth);
this.progressBar.setWidth(w, animate === true || (animate !== false && this.animate));
if(this.textTopEl){
//textTopEl should be the same width as the bar so overflow will clip as the bar moves
this.textTopEl.removeClass('x-hidden').setWidth(w);
}
}
this.fireEvent('update', this, value, text);
return this;
},
/**
* Initiates an auto-updating progress bar. A duration can be specified, in which case the progress
* bar will automatically reset after a fixed amount of time and optionally call a callback function
* if specified. If no duration is passed in, then the progress bar will run indefinitely and must
* be manually cleared by calling {@link #reset}. The wait method accepts a config object with
* the following properties:
* <pre>
Property Type Description
---------- ------------ ----------------------------------------------------------------------
duration Number The length of time in milliseconds that the progress bar should
run before resetting itself (defaults to undefined, in which case it
will run indefinitely until reset is called)
interval Number The length of time in milliseconds between each progress update
(defaults to 1000 ms)
animate Boolean Whether to animate the transition of the progress bar. If this value is
not specified, the default for the class is used.
increment Number The number of progress update segments to display within the progress
bar (defaults to 10). If the bar reaches the end and is still
updating, it will automatically wrap back to the beginning.
text String Optional text to display in the progress bar element (defaults to '').
fn Function A callback function to execute after the progress bar finishes auto-
updating. The function will be called with no arguments. This function
will be ignored if duration is not specified since in that case the
progress bar can only be stopped programmatically, so any required function
should be called by the same code after it resets the progress bar.
scope Object The scope that is passed to the callback function (only applies when
duration and fn are both passed).
</pre>
*
* Example usage:
* <pre><code>
var p = new Ext.ProgressBar({
renderTo: 'my-el'
});
//Wait for 5 seconds, then update the status el (progress bar will auto-reset)
p.wait({
interval: 100, //bar will move fast!
duration: 5000,
increment: 15,
text: 'Updating...',
scope: this,
fn: function(){
Ext.fly('status').update('Done!');
}
});
//Or update indefinitely until some async action completes, then reset manually
p.wait();
myAction.on('complete', function(){
p.reset();
Ext.fly('status').update('Done!');
});
</code></pre>
* @param {Object} config (optional) Configuration options
* @return {Ext.ProgressBar} this
*/
wait : function(o){
if(!this.waitTimer){
var scope = this;
o = o || {};
this.updateText(o.text);
this.waitTimer = Ext.TaskMgr.start({
run: function(i){
var inc = o.increment || 10;
this.updateProgress(((((i+inc)%inc)+1)*(100/inc))*0.01, null, o.animate);
},
interval: o.interval || 1000,
duration: o.duration,
onStop: function(){
if(o.fn){
o.fn.apply(o.scope || this);
}
this.reset();
},
scope: scope
});
}
return this;
},
/**
* Returns true if the progress bar is currently in a {@link #wait} operation
* @return {Boolean} True if waiting, else false
*/
isWaiting : function(){
return this.waitTimer !== null;
},
/**
* Updates the progress bar text. If specified, textEl will be updated, otherwise the progress
* bar itself will display the updated text.
* @param {String} text (optional) The string to display in the progress text element (defaults to '')
* @return {Ext.ProgressBar} this
*/
updateText : function(text){
this.text = text || ' ';
if(this.rendered){
this.textEl.update(this.text);
}
return this;
},
/**
* Synchronizes the inner bar width to the proper proportion of the total componet width based
* on the current progress {@link #value}. This will be called automatically when the ProgressBar
* is resized by a layout, but if it is rendered auto width, this method can be called from
* another resize handler to sync the ProgressBar if necessary.
*/
syncProgressBar : function(){
if(this.value){
this.updateProgress(this.value, this.text);
}
return this;
},
/**
* Sets the size of the progress bar.
* @param {Number} width The new width in pixels
* @param {Number} height The new height in pixels
* @return {Ext.ProgressBar} this
*/
setSize : function(w, h){
Ext.ProgressBar.superclass.setSize.call(this, w, h);
if(this.textTopEl){
var inner = this.el.dom.firstChild;
this.textEl.setSize(inner.offsetWidth, inner.offsetHeight);
}
this.syncProgressBar();
return this;
},
/**
* Resets the progress bar value to 0 and text to empty string. If hide = true, the progress
* bar will also be hidden (using the {@link #hideMode} property internally).
* @param {Boolean} hide (optional) True to hide the progress bar (defaults to false)
* @return {Ext.ProgressBar} this
*/
reset : function(hide){
this.updateProgress(0);
if(this.textTopEl){
this.textTopEl.addClass('x-hidden');
}
if(this.waitTimer){
this.waitTimer.onStop = null; //prevent recursion
Ext.TaskMgr.stop(this.waitTimer);
this.waitTimer = null;
}
if(hide === true){
this.hide();
}
return this;
}
});
Ext.reg('progress', Ext.ProgressBar);