3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>The source code</title>
5 <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
6 <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
8 <body onload="prettyPrint();">
9 <pre class="prettyprint lang-js">/*!
10 * Ext JS Library 3.2.2
11 * Copyright(c) 2006-2010 Ext JS, Inc.
13 * http://www.extjs.com/license
17 <div id="cls-Ext.slider.Thumb"></div>/**
18 * @class Ext.slider.Thumb
20 * Represents a single thumb element on a Slider. This would not usually be created manually and would instead
21 * be created internally by an {@link Ext.slider.MultiSlider Ext.Slider}.
23 Ext.slider.Thumb = Ext.extend(Object, {
25 <div id="cfg-Ext.slider.Thumb-slider"></div>/**
27 * @cfg {Ext.slider.MultiSlider} slider The Slider to render to (required)
29 constructor: function(config) {
30 <div id="prop-Ext.slider.Thumb-slider"></div>/**
32 * @type Ext.slider.MultiSlider
33 * The slider this thumb is contained within
35 Ext.apply(this, config || {}, {
36 cls: 'x-slider-thumb',
38 <div id="cfg-Ext.slider.Thumb-constrain"></div>/**
39 * @cfg {Boolean} constrain True to constrain the thumb so that it cannot overlap its siblings
44 Ext.slider.Thumb.superclass.constructor.call(this, config);
46 if (this.slider.vertical) {
47 Ext.apply(this, Ext.slider.Thumb.Vertical);
51 <div id="method-Ext.slider.Thumb-render"></div>/**
52 * Renders the thumb into a slider
55 this.el = this.slider.innerEl.insertFirst({cls: this.cls});
60 <div id="method-Ext.slider.Thumb-enable"></div>/**
61 * Enables the thumb if it is currently disabled
64 this.disabled = false;
65 this.el.removeClass(this.slider.disabledClass);
68 <div id="method-Ext.slider.Thumb-disable"></div>/**
69 * Disables the thumb if it is currently enabled
73 this.el.addClass(this.slider.disabledClass);
76 <div id="method-Ext.slider.Thumb-initEvents"></div>/**
77 * Sets up an Ext.dd.DragTracker for this thumb
79 initEvents: function() {
82 el.addClassOnOver('x-slider-thumb-over');
84 this.tracker = new Ext.dd.DragTracker({
85 onBeforeStart: this.onBeforeDragStart.createDelegate(this),
86 onStart : this.onDragStart.createDelegate(this),
87 onDrag : this.onDrag.createDelegate(this),
88 onEnd : this.onDragEnd.createDelegate(this),
93 this.tracker.initEl(el);
98 * This is tied into the internal Ext.dd.DragTracker. If the slider is currently disabled,
99 * this returns false to disable the DragTracker too.
100 * @return {Boolean} False if the slider is currently disabled
102 onBeforeDragStart : function(e) {
106 this.slider.promoteThumb(this);
113 * This is tied into the internal Ext.dd.DragTracker's onStart template method. Adds the drag CSS class
114 * to the thumb and fires the 'dragstart' event
116 onDragStart: function(e){
117 this.el.addClass('x-slider-thumb-drag');
118 this.dragging = true;
119 this.dragStartValue = this.value;
121 this.slider.fireEvent('dragstart', this.slider, e, this);
126 * This is tied into the internal Ext.dd.DragTracker's onDrag template method. This is called every time
127 * the DragTracker detects a drag movement. It updates the Slider's value using the position of the drag
129 onDrag: function(e) {
130 var slider = this.slider,
132 newValue = this.getNewValue();
134 if (this.constrain) {
135 var above = slider.thumbs[index + 1],
136 below = slider.thumbs[index - 1];
138 if (below != undefined && newValue <= below.value) newValue = below.value;
139 if (above != undefined && newValue >= above.value) newValue = above.value;
142 slider.setValue(index, newValue, false);
143 slider.fireEvent('drag', slider, e, this);
146 getNewValue: function() {
147 var slider = this.slider,
148 pos = slider.innerEl.translatePoints(this.tracker.getXY());
150 return Ext.util.Format.round(slider.reverseValue(pos.left), slider.decimalPrecision);
155 * This is tied to the internal Ext.dd.DragTracker's onEnd template method. Removes the drag CSS class and
156 * fires the 'changecomplete' event with the new value
158 onDragEnd: function(e) {
159 var slider = this.slider,
162 this.el.removeClass('x-slider-thumb-drag');
164 this.dragging = false;
165 slider.fireEvent('dragend', slider, e);
167 if (this.dragStartValue != value) {
168 slider.fireEvent('changecomplete', slider, value, this);
177 Ext.destroyMembers(this, 'tracker', 'el');
181 <div id="cls-Ext.slider.MultiSlider"></div>/**
182 * @class Ext.slider.MultiSlider
183 * @extends Ext.BoxComponent
184 * 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:
187 renderTo: Ext.getBody(),
195 * Sliders can be created with more than one thumb handle by passing an array of values instead of a single one:
198 renderTo: Ext.getBody(),
200 values: [25, 50, 75],
204 //this defaults to true, setting to false allows the thumbs to pass each other
205 {@link #constrainThumbs}: false
209 Ext.slider.MultiSlider = Ext.extend(Ext.BoxComponent, {
210 <div id="cfg-Ext.slider.MultiSlider-value"></div>/**
211 * @cfg {Number} value The value to initialize the slider with. Defaults to minValue.
213 <div id="cfg-Ext.slider.MultiSlider-vertical"></div>/**
214 * @cfg {Boolean} vertical Orient the Slider vertically rather than horizontally, defaults to false.
217 <div id="cfg-Ext.slider.MultiSlider-minValue"></div>/**
218 * @cfg {Number} minValue The minimum value for the Slider. Defaults to 0.
221 <div id="cfg-Ext.slider.MultiSlider-maxValue"></div>/**
222 * @cfg {Number} maxValue The maximum value for the Slider. Defaults to 100.
225 <div id="cfg-Ext.slider.MultiSlider-decimalPrecision."></div>/**
226 * @cfg {Number/Boolean} decimalPrecision.
227 * <p>The number of decimal places to which to round the Slider's value. Defaults to 0.</p>
228 * <p>To disable rounding, configure as <tt><b>false</b></tt>.</p>
231 <div id="cfg-Ext.slider.MultiSlider-keyIncrement"></div>/**
232 * @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.
235 <div id="cfg-Ext.slider.MultiSlider-increment"></div>/**
236 * @cfg {Number} increment How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'.
242 * @property clickRange
244 * Determines whether or not a click to the slider component is considered to be a user request to change the value. Specified as an array of [top, bottom],
245 * the click event's 'top' property is compared to these numbers and the click only considered a change request if it falls within them. e.g. if the 'top'
246 * value of the click event is 4 or 16, the click is not considered a change request as it falls outside of the [5, 15] range
250 <div id="cfg-Ext.slider.MultiSlider-clickToChange"></div>/**
251 * @cfg {Boolean} clickToChange Determines whether or not clicking on the Slider axis will change the slider. Defaults to true
253 clickToChange : true,
254 <div id="cfg-Ext.slider.MultiSlider-animate"></div>/**
255 * @cfg {Boolean} animate Turn on or off animation. Defaults to true
259 <div id="prop-Ext.slider.MultiSlider-dragging"></div>/**
260 * True while the thumb is in a drag operation
265 <div id="cfg-Ext.slider.MultiSlider-constrainThumbs"></div>/**
266 * @cfg {Boolean} constrainThumbs True to disallow thumbs from overlapping one another. Defaults to true
268 constrainThumbs: true,
272 * @property topThumbZIndex
274 * The number used internally to set the z index of the top thumb (see promoteThumb for details)
276 topThumbZIndex: 10000,
279 initComponent : function(){
280 if(!Ext.isDefined(this.value)){
281 this.value = this.minValue;
284 <div id="prop-Ext.slider.MultiSlider-thumbs"></div>/**
287 * Array containing references to each thumb
291 Ext.slider.MultiSlider.superclass.initComponent.call(this);
293 this.keyIncrement = Math.max(this.increment, this.keyIncrement);
295 <div id="event-Ext.slider.MultiSlider-beforechange"></div>/**
296 * @event beforechange
297 * Fires before the slider value is changed. By returning false from an event handler,
298 * you can cancel the event and prevent the slider from changing.
299 * @param {Ext.Slider} slider The slider
300 * @param {Number} newValue The new value which the slider is being changed to.
301 * @param {Number} oldValue The old value which the slider was previously.
305 <div id="event-Ext.slider.MultiSlider-change"></div>/**
307 * Fires when the slider value is changed.
308 * @param {Ext.Slider} slider The slider
309 * @param {Number} newValue The new value which the slider has been changed to.
310 * @param {Ext.slider.Thumb} thumb The thumb that was changed
314 <div id="event-Ext.slider.MultiSlider-changecomplete"></div>/**
315 * @event changecomplete
316 * Fires when the slider value is changed by the user and any drag operations have completed.
317 * @param {Ext.Slider} slider The slider
318 * @param {Number} newValue The new value which the slider has been changed to.
319 * @param {Ext.slider.Thumb} thumb The thumb that was changed
323 <div id="event-Ext.slider.MultiSlider-dragstart"></div>/**
325 * Fires after a drag operation has started.
326 * @param {Ext.Slider} slider The slider
327 * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
331 <div id="event-Ext.slider.MultiSlider-drag"></div>/**
333 * Fires continuously during the drag operation while the mouse is moving.
334 * @param {Ext.Slider} slider The slider
335 * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
339 <div id="event-Ext.slider.MultiSlider-dragend"></div>/**
341 * Fires after the drag operation has completed.
342 * @param {Ext.Slider} slider The slider
343 * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
348 <div id="prop-Ext.slider.MultiSlider-values"></div>/**
351 * Array of values to initalize the thumbs with
353 if (this.values == undefined || Ext.isEmpty(this.values)) this.values = [0];
355 var values = this.values;
357 for (var i=0; i < values.length; i++) {
358 this.addThumb(values[i]);
362 Ext.apply(this, Ext.slider.Vertical);
366 <div id="method-Ext.slider.MultiSlider-addThumb"></div>/**
367 * Creates a new thumb and adds it to the slider
368 * @param {Number} value The initial value to set on the thumb. Defaults to 0
370 addThumb: function(value) {
371 var thumb = new Ext.slider.Thumb({
374 index : this.thumbs.length,
375 constrain: this.constrainThumbs
377 this.thumbs.push(thumb);
379 //render the thumb now if needed
380 if (this.rendered) thumb.render();
385 * Moves the given thumb above all other by increasing its z-index. This is called when as drag
386 * any thumb, so that the thumb that was just dragged is always at the highest z-index. This is
387 * required when the thumbs are stacked on top of each other at one of the ends of the slider's
388 * range, which can result in the user not being able to move any of them.
389 * @param {Ext.slider.Thumb} topThumb The thumb to move to the top
391 promoteThumb: function(topThumb) {
392 var thumbs = this.thumbs,
395 for (var i = 0, j = thumbs.length; i < j; i++) {
398 if (thumb == topThumb) {
399 zIndex = this.topThumbZIndex;
404 thumb.el.setStyle('zIndex', zIndex);
409 onRender : function() {
411 cls: 'x-slider ' + (this.vertical ? 'x-slider-vert' : 'x-slider-horz'),
415 cls:'x-slider-inner',
416 cn : [{tag:'a', cls:'x-slider-focus', href:"#", tabIndex: '-1', hidefocus:'on'}]
421 Ext.slider.MultiSlider.superclass.onRender.apply(this, arguments);
423 this.endEl = this.el.first();
424 this.innerEl = this.endEl.first();
425 this.focusEl = this.innerEl.child('.x-slider-focus');
428 for (var i=0; i < this.thumbs.length; i++) {
429 this.thumbs[i].render();
432 //calculate the size of half a thumb
433 var thumb = this.innerEl.child('.x-slider-thumb');
434 this.halfThumb = (this.vertical ? thumb.getHeight() : thumb.getWidth()) / 2;
441 * Adds keyboard and mouse listeners on this.el. Ignores click events on the internal focus element.
442 * Creates a new DragTracker which is used to control what happens when the user drags the thumb around.
444 initEvents : function(){
447 mousedown: this.onMouseDown,
448 keydown : this.onKeyDown
451 this.focusEl.swallowEvent("click", true);
456 * Mousedown handler for the slider. If the clickToChange is enabled and the click was not on the draggable 'thumb',
457 * this calculates the new value of the slider and tells the implementation (Horizontal or Vertical) to move the thumb
458 * @param {Ext.EventObject} e The click event
460 onMouseDown : function(e){
465 //see if the click was on any of the thumbs
466 var thumbClicked = false;
467 for (var i=0; i < this.thumbs.length; i++) {
468 thumbClicked = thumbClicked || e.target == this.thumbs[i].el.dom;
471 if (this.clickToChange && !thumbClicked) {
472 var local = this.innerEl.translatePoints(e.getXY());
473 this.onClickChange(local);
480 * Moves the thumb to the indicated position. Note that a Vertical implementation is provided in Ext.slider.Vertical.
481 * Only changes the value if the click was within this.clickRange.
482 * @param {Object} local Object containing top and left values for the click event.
484 onClickChange : function(local) {
485 if (local.top > this.clickRange[0] && local.top < this.clickRange[1]) {
486 //find the nearest thumb to the click event
487 var thumb = this.getNearest(local, 'left'),
490 this.setValue(index, Ext.util.Format.round(this.reverseValue(local.left), this.decimalPrecision), undefined, true);
496 * Returns the nearest thumb to a click event, along with its distance
497 * @param {Object} local Object containing top and left values from a click event
498 * @param {String} prop The property of local to compare on. Use 'left' for horizontal sliders, 'top' for vertical ones
499 * @return {Object} The closest thumb object and its distance from the click event
501 getNearest: function(local, prop) {
502 var localValue = prop == 'top' ? this.innerEl.getHeight() - local[prop] : local[prop],
503 clickValue = this.reverseValue(localValue),
504 nearestDistance = (this.maxValue - this.minValue) + 5, //add a small fudge for the end of the slider
508 for (var i=0; i < this.thumbs.length; i++) {
509 var thumb = this.thumbs[i],
511 dist = Math.abs(value - clickValue);
513 if (Math.abs(dist <= nearestDistance)) {
516 nearestDistance = dist;
524 * Handler for any keypresses captured by the slider. If the key is UP or RIGHT, the thumb is moved along to the right
525 * by this.keyIncrement. If DOWN or LEFT it is moved left. Pressing CTRL moves the slider to the end in either direction
526 * @param {Ext.EventObject} e The Event object
528 onKeyDown : function(e){
530 * The behaviour for keyboard handling with multiple thumbs is currently undefined.
531 * There's no real sane default for it, so leave it like this until we come up
532 * with a better way of doing it.
534 if(this.disabled || this.thumbs.length !== 1){
544 val = e.ctrlKey ? this.maxValue : this.getValue(0) + this.keyIncrement;
545 this.setValue(0, val, undefined, true);
550 val = e.ctrlKey ? this.minValue : this.getValue(0) - this.keyIncrement;
551 this.setValue(0, val, undefined, true);
560 * If using snapping, this takes a desired new value and returns the closest snapped
562 * @param {Number} value The unsnapped value
563 * @return {Number} The value of the nearest snap target
565 doSnap : function(value){
566 if (!(this.increment && value)) {
569 var newValue = value,
570 inc = this.increment,
576 } else if (m * 2 < -inc) {
580 return newValue.constrain(this.minValue, this.maxValue);
584 afterRender : function(){
585 Ext.slider.MultiSlider.superclass.afterRender.apply(this, arguments);
587 for (var i=0; i < this.thumbs.length; i++) {
588 var thumb = this.thumbs[i];
590 if (thumb.value !== undefined) {
591 var v = this.normalizeValue(thumb.value);
593 if (v !== thumb.value) {
594 // delete this.value;
595 this.setValue(i, v, false);
597 this.moveThumb(i, this.translateValue(v), false);
605 * Returns the ratio of pixels to mapped values. e.g. if the slider is 200px wide and maxValue - minValue is 100,
607 * @return {Number} The ratio of pixels to mapped values
609 getRatio : function(){
610 var w = this.innerEl.getWidth(),
611 v = this.maxValue - this.minValue;
612 return v == 0 ? w : (w/v);
617 * Returns a snapped, constrained value when given a desired value
618 * @param {Number} value Raw number value
619 * @return {Number} The raw value rounded to the correct d.p. and constrained within the set max and min values
621 normalizeValue : function(v){
623 v = Ext.util.Format.round(v, this.decimalPrecision);
624 v = v.constrain(this.minValue, this.maxValue);
628 <div id="method-Ext.slider.MultiSlider-setMinValue"></div>/**
629 * Sets the minimum value for the slider instance. If the current value is less than the
630 * minimum value, the current value will be changed.
631 * @param {Number} val The new minimum value
633 setMinValue : function(val){
636 thumbs = this.thumbs,
642 t.value = t.value < val ? val : t.value;
647 <div id="method-Ext.slider.MultiSlider-setMaxValue"></div>/**
648 * Sets the maximum value for the slider instance. If the current value is more than the
649 * maximum value, the current value will be changed.
650 * @param {Number} val The new maximum value
652 setMaxValue : function(val){
655 thumbs = this.thumbs,
661 t.value = t.value > val ? val : t.value;
666 <div id="method-Ext.slider.MultiSlider-setValue"></div>/**
667 * Programmatically sets the value of the Slider. Ensures that the value is constrained within
668 * the minValue and maxValue.
669 * @param {Number} index Index of the thumb to move
670 * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue)
671 * @param {Boolean} animate Turn on or off animation, defaults to true
673 setValue : function(index, v, animate, changeComplete) {
674 var thumb = this.thumbs[index],
677 v = this.normalizeValue(v);
679 if (v !== thumb.value && this.fireEvent('beforechange', this, v, thumb.value, thumb) !== false) {
682 this.moveThumb(index, this.translateValue(v), animate !== false);
683 this.fireEvent('change', this, v, thumb);
685 this.fireEvent('changecomplete', this, v, thumb);
694 translateValue : function(v) {
695 var ratio = this.getRatio();
696 return (v * ratio) - (this.minValue * ratio) - this.halfThumb;
701 * Given a pixel location along the slider, returns the mapped slider value for that pixel.
702 * E.g. if we have a slider 200px wide with minValue = 100 and maxValue = 500, reverseValue(50)
704 * @param {Number} pos The position along the slider to return a mapped value for
705 * @return {Number} The mapped value for the given position
707 reverseValue : function(pos){
708 var ratio = this.getRatio();
709 return (pos + (this.minValue * ratio)) / ratio;
714 * @param {Number} index Index of the thumb to move
716 moveThumb: function(index, v, animate){
717 var thumb = this.thumbs[index].el;
719 if(!animate || this.animate === false){
722 thumb.shift({left: v, stopFx: true, duration:.35});
728 this.focusEl.focus(10);
732 onResize : function(w, h){
733 var thumbs = this.thumbs,
738 * If we happen to be animating during a resize, the position of the thumb will likely be off
739 * when the animation stops. As such, just stop any animations before syncing the thumbs.
742 thumbs[i].el.stopFx();
744 // check to see if we're using an auto width
746 this.innerEl.setWidth(w - (this.el.getPadding('l') + this.endEl.getPadding('r')));
749 Ext.slider.MultiSlider.superclass.onResize.apply(this, arguments);
753 onDisable: function(){
754 Ext.slider.MultiSlider.superclass.onDisable.call(this);
756 for (var i=0; i < this.thumbs.length; i++) {
757 var thumb = this.thumbs[i],
763 //IE breaks when using overflow visible and opacity other than 1.
764 //Create a place holder for the thumb and display it.
768 this.innerEl.addClass(this.disabledClass).dom.disabled = true;
770 if (!this.thumbHolder) {
771 this.thumbHolder = this.endEl.createChild({cls: 'x-slider-thumb ' + this.disabledClass});
774 this.thumbHolder.show().setXY(xy);
780 onEnable: function(){
781 Ext.slider.MultiSlider.superclass.onEnable.call(this);
783 for (var i=0; i < this.thumbs.length; i++) {
784 var thumb = this.thumbs[i],
790 this.innerEl.removeClass(this.disabledClass).dom.disabled = false;
792 if (this.thumbHolder) this.thumbHolder.hide();
800 <div id="method-Ext.slider.MultiSlider-syncThumb"></div>/**
801 * Synchronizes the thumb position to the proper proportion of the total component width based
802 * on the current slider {@link #value}. This will be called automatically when the Slider
803 * is resized by a layout, but if it is rendered auto width, this method can be called from
804 * another resize handler to sync the Slider if necessary.
806 syncThumb : function() {
808 for (var i=0; i < this.thumbs.length; i++) {
809 this.moveThumb(i, this.translateValue(this.thumbs[i].value));
814 <div id="method-Ext.slider.MultiSlider-getValue"></div>/**
815 * Returns the current value of the slider
816 * @param {Number} index The index of the thumb to return a value for
817 * @return {Number} The current value of the slider
819 getValue : function(index) {
820 return this.thumbs[index].value;
823 <div id="method-Ext.slider.MultiSlider-getValues"></div>/**
824 * Returns an array of values - one for the location of each thumb
825 * @return {Array} The set of thumb values
827 getValues: function() {
830 for (var i=0; i < this.thumbs.length; i++) {
831 values.push(this.thumbs[i].value);
838 beforeDestroy : function(){
839 var thumbs = this.thumbs;
840 for(var i = 0, len = thumbs.length; i < len; ++i){
844 Ext.destroyMembers(this, 'endEl', 'innerEl', 'focusEl', 'thumbHolder');
845 Ext.slider.MultiSlider.superclass.beforeDestroy.call(this);
849 Ext.reg('multislider', Ext.slider.MultiSlider);
851 <div id="cls-Ext.slider.SingleSlider"></div>/**
852 * @class Ext.slider.SingleSlider
853 * @extends Ext.slider.MultiSlider
854 * Slider which supports vertical or horizontal orientation, keyboard adjustments,
855 * configurable snapping, axis clicking and animation. Can be added as an item to
856 * any container. Example usage:
858 new Ext.slider.SingleSlider({
859 renderTo: Ext.getBody(),
867 * The class Ext.slider.SingleSlider is aliased to Ext.Slider for backwards compatibility.
869 Ext.slider.SingleSlider = Ext.extend(Ext.slider.MultiSlider, {
870 constructor: function(config) {
871 config = config || {};
873 Ext.applyIf(config, {
874 values: [config.value || 0]
877 Ext.slider.SingleSlider.superclass.constructor.call(this, config);
880 <div id="method-Ext.slider.SingleSlider-getValue"></div>/**
881 * Returns the current value of the slider
882 * @return {Number} The current value of the slider
884 getValue: function() {
885 //just returns the value of the first thumb, which should be the only one in a single slider
886 return Ext.slider.SingleSlider.superclass.getValue.call(this, 0);
889 <div id="method-Ext.slider.SingleSlider-setValue"></div>/**
890 * Programmatically sets the value of the Slider. Ensures that the value is constrained within
891 * the minValue and maxValue.
892 * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue)
893 * @param {Boolean} animate Turn on or off animation, defaults to true
895 setValue: function(value, animate) {
896 var args = Ext.toArray(arguments),
899 //this is to maintain backwards compatiblity for sliders with only one thunb. Usually you must pass the thumb
900 //index to setValue, but if we only have one thumb we inject the index here first if given the multi-slider
901 //signature without the required index. The index will always be 0 for a single slider
902 if (len == 1 || (len <= 3 && typeof arguments[1] != 'number')) {
906 return Ext.slider.SingleSlider.superclass.setValue.apply(this, args);
909 <div id="method-Ext.slider.SingleSlider-syncThumb"></div>/**
910 * Synchronizes the thumb position to the proper proportion of the total component width based
911 * on the current slider {@link #value}. This will be called automatically when the Slider
912 * is resized by a layout, but if it is rendered auto width, this method can be called from
913 * another resize handler to sync the Slider if necessary.
915 syncThumb : function() {
916 return Ext.slider.SingleSlider.superclass.syncThumb.apply(this, [0].concat(arguments));
920 getNearest : function(){
921 // Since there's only 1 thumb, it's always the nearest
922 return this.thumbs[0];
926 //backwards compatibility
927 Ext.Slider = Ext.slider.SingleSlider;
929 Ext.reg('slider', Ext.slider.SingleSlider);
931 // private class to support vertical sliders
932 Ext.slider.Vertical = {
933 onResize : function(w, h){
934 this.innerEl.setHeight(h - (this.el.getPadding('t') + this.endEl.getPadding('b')));
938 getRatio : function(){
939 var h = this.innerEl.getHeight(),
940 v = this.maxValue - this.minValue;
944 moveThumb: function(index, v, animate) {
945 var thumb = this.thumbs[index],
948 if (!animate || this.animate === false) {
951 el.shift({bottom: v, stopFx: true, duration:.35});
955 onClickChange : function(local) {
956 if (local.left > this.clickRange[0] && local.left < this.clickRange[1]) {
957 var thumb = this.getNearest(local, 'top'),
959 value = this.minValue + this.reverseValue(this.innerEl.getHeight() - local.top);
961 this.setValue(index, Ext.util.Format.round(value, this.decimalPrecision), undefined, true);
966 //private class to support vertical dragging of thumbs within a slider
967 Ext.slider.Thumb.Vertical = {
968 getNewValue: function() {
969 var slider = this.slider,
970 innerEl = slider.innerEl,
971 pos = innerEl.translatePoints(this.tracker.getXY()),
972 bottom = innerEl.getHeight() - pos.top;
974 return slider.minValue + Ext.util.Format.round(bottom / slider.getRatio(), slider.decimalPrecision);