X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6e39d509471fe9b4e2660e0d1631b350d0c66f40..2e847cf21b8ab9d15fa167b315ca5b2fa92638fc:/src/widgets/Slider.js diff --git a/src/widgets/Slider.js b/src/widgets/Slider.js index 87dae022..252fcd3e 100644 --- a/src/widgets/Slider.js +++ b/src/widgets/Slider.js @@ -1,6 +1,6 @@ /*! - * Ext JS Library 3.1.0 - * Copyright(c) 2006-2009 Ext JS, LLC + * Ext JS Library 3.1.1 + * Copyright(c) 2006-2010 Ext JS, LLC * licensing@extjs.com * http://www.extjs.com/license */ @@ -22,20 +22,20 @@ new Ext.Slider({ */ 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. - */ + /** + * @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. - */ + /** + * @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. - */ + /** + * @cfg {Number} maxValue The maximum value for the Slider. Defaults to 100. + */ maxValue: 100, /** * @cfg {Number/Boolean} decimalPrecision. @@ -43,23 +43,23 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, { *

To disable rounding, configure as false.

*/ 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. - */ + /** + * @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'. - */ + /** + * @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 + // private clickRange: [5,15], - /** - * @cfg {Boolean} clickToChange Determines whether or not clicking on the Slider axis will change the slider. Defaults to true - */ + /** + * @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 - */ + /** + * @cfg {Boolean} animate Turn on or off animation. Defaults to true + */ animate: true, /** @@ -80,54 +80,54 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, { * @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. + * @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 + '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 + * @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 + * @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' - ); + * @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 + // private override onRender : function(){ this.autoEl = { cls: 'x-slider ' + (this.vertical ? 'x-slider-vert' : 'x-slider-horz'), @@ -142,7 +142,7 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, { this.initEvents(); }, - // private override + // private override initEvents : function(){ this.thumb.addClassOnOver('x-slider-thumb-over'); this.mon(this.el, { @@ -164,7 +164,7 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, { this.tracker.initEl(this.thumb); }, - // private override + // private override onMouseDown : function(e){ if(this.disabled){ return; @@ -176,14 +176,14 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, { this.focus(); }, - // private + // 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 + // private onKeyDown : function(e){ if(this.disabled){e.preventDefault();return;} var k = e.getKey(); @@ -211,12 +211,12 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, { } }, - // private + // private doSnap : function(value){ if(!(this.increment && value)){ return value; } - var newValue = value, + var newValue = value, inc = this.increment, m = value % inc; if(m != 0){ @@ -230,7 +230,7 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, { return newValue.constrain(this.minValue, this.maxValue); }, - // private + // private afterRender : function(){ Ext.Slider.superclass.afterRender.apply(this, arguments); if(this.value !== undefined){ @@ -244,27 +244,53 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, { } }, - // private + // private getRatio : function(){ var w = this.innerEl.getWidth(), v = this.maxValue - this.minValue; return v == 0 ? w : (w/v); }, - // private + // 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; }, + + /** + * Sets the minimum value for the slider instance. If the current value is less than the + * minimum value, the current value will be changed. + * @param {Number} val The new minimum value + */ + setMinValue : function(val){ + this.minValue = val; + this.syncThumb(); + if(this.value < val){ + this.setValue(val); + } + }, + + /** + * Sets the maximum value for the slider instance. If the current value is more than the + * maximum value, the current value will be changed. + * @param {Number} val The new maximum value + */ + setMaxValue : function(val){ + this.maxValue = val; + this.syncThumb(); + if(this.value > val){ + this.setValue(val); + } + }, - /** - * 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 - */ + /** + * 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){ @@ -277,18 +303,18 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, { } }, - // private + // private translateValue : function(v){ var ratio = this.getRatio(); return (v * ratio) - (this.minValue * ratio) - this.halfThumb; }, - reverseValue : function(pos){ + reverseValue : function(pos){ var ratio = this.getRatio(); - return (pos + this.halfThumb + (this.minValue * ratio)) / ratio; + return (pos + (this.minValue * ratio)) / ratio; }, - // private + // private moveThumb: function(v, animate){ if(!animate || this.animate === false){ this.thumb.setLeft(v); @@ -297,17 +323,17 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, { } }, - // private + // private focus : function(){ this.focusEl.focus(10); }, - // private + // private onBeforeDragStart : function(e){ return !this.disabled; }, - // private + // private onDragStart: function(e){ this.thumb.addClass('x-slider-thumb-drag'); this.dragging = true; @@ -315,14 +341,14 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, { this.fireEvent('dragstart', this, e); }, - // private + // 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 + // private onDragEnd: function(e){ this.thumb.removeClass('x-slider-thumb-drag'); this.dragging = false; @@ -332,12 +358,13 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, { } }, - // private + // private onResize : function(w, h){ this.innerEl.setWidth(w - (this.el.getPadding('l') + this.endEl.getPadding('r'))); this.syncThumb(); + Ext.Slider.superclass.onResize.apply(this, arguments); }, - + //private onDisable: function(){ Ext.Slider.superclass.onDisable.call(this); @@ -349,12 +376,12 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, { 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 = this.endEl.createChild({cls: 'x-slider-thumb ' + this.disabledClass}); } this.thumbHolder.show().setXY(xy); } }, - + //private onEnable: function(){ Ext.Slider.superclass.onEnable.call(this); @@ -368,7 +395,7 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, { 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 @@ -381,14 +408,14 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, { } }, - /** - * Returns the current value of the slider - * @return {Number} The current value of the slider - */ + /** + * Returns the current value of the slider + * @return {Number} The current value of the slider + */ getValue : function(){ return this.value; }, - + // private beforeDestroy : function(){ Ext.destroyMembers(this, 'endEl', 'innerEl', 'thumb', 'halfThumb', 'focusEl', 'tracker', 'thumbHolder');