src/widgets/Slider.js

   1 /*!
   2  * Ext JS Library 3.2.1
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.ns('Ext.slider');
   8
   9 /**
  10  * @class Ext.slider.Thumb
  11  * @extends Object
  12  * Represents a single thumb element on a Slider. This would not usually be created manually and would instead
  13  * be created internally by an {@link Ext.slider.MultiSlider Ext.Slider}.
  14  */
  15 Ext.slider.Thumb = Ext.extend(Object, {
  16
  17     /**
  18      * @constructor
  19      * @cfg {Ext.slider.MultiSlider} slider The Slider to render to (required)
  20      */
  21     constructor: function(config) {
  22         /**
  23          * @property slider
  24          * @type Ext.slider.MultiSlider
  25          * The slider this thumb is contained within
  26          */
  27         Ext.apply(this, config || {}, {
  28             cls: 'x-slider-thumb',
  29
  30             /**
  31              * @cfg {Boolean} constrain True to constrain the thumb so that it cannot overlap its siblings
  32              */
  33             constrain: false
  34         });
  35
  36         Ext.slider.Thumb.superclass.constructor.call(this, config);
  37
  38         if (this.slider.vertical) {
  39             Ext.apply(this, Ext.slider.Thumb.Vertical);
  40         }
  41     },
  42
  43     /**
  44      * Renders the thumb into a slider
  45      */
  46     render: function() {
  47         this.el = this.slider.innerEl.insertFirst({cls: this.cls});
  48
  49         this.initEvents();
  50     },
  51
  52     /**
  53      * Enables the thumb if it is currently disabled
  54      */
  55     enable: function() {
  56         this.disabled = false;
  57         this.el.removeClass(this.slider.disabledClass);
  58     },
  59
  60     /**
  61      * Disables the thumb if it is currently enabled
  62      */
  63     disable: function() {
  64         this.disabled = true;
  65         this.el.addClass(this.slider.disabledClass);
  66     },
  67
  68     /**
  69      * Sets up an Ext.dd.DragTracker for this thumb
  70      */
  71     initEvents: function() {
  72         var el = this.el;
  73
  74         el.addClassOnOver('x-slider-thumb-over');
  75
  76         this.tracker = new Ext.dd.DragTracker({
  77             onBeforeStart: this.onBeforeDragStart.createDelegate(this),
  78             onStart      : this.onDragStart.createDelegate(this),
  79             onDrag       : this.onDrag.createDelegate(this),
  80             onEnd        : this.onDragEnd.createDelegate(this),
  81             tolerance    : 3,
  82             autoStart    : 300
  83         });
  84
  85         this.tracker.initEl(el);
  86     },
  87
  88     /**
  89      * @private
  90      * This is tied into the internal Ext.dd.DragTracker. If the slider is currently disabled,
  91      * this returns false to disable the DragTracker too.
  92      * @return {Boolean} False if the slider is currently disabled
  93      */
  94     onBeforeDragStart : function(e) {
  95         if (this.disabled) {
  96             return false;
  97         } else {
  98             this.slider.promoteThumb(this);
  99             return true;
 100         }
 101     },
 102
 103     /**
 104      * @private
 105      * This is tied into the internal Ext.dd.DragTracker's onStart template method. Adds the drag CSS class
 106      * to the thumb and fires the 'dragstart' event
 107      */
 108     onDragStart: function(e){
 109         this.el.addClass('x-slider-thumb-drag');
 110         this.dragging = true;
 111         this.dragStartValue = this.value;
 112
 113         this.slider.fireEvent('dragstart', this.slider, e, this);
 114     },
 115
 116     /**
 117      * @private
 118      * This is tied into the internal Ext.dd.DragTracker's onDrag template method. This is called every time
 119      * the DragTracker detects a drag movement. It updates the Slider's value using the position of the drag
 120      */
 121     onDrag: function(e) {
 122         var slider   = this.slider,
 123             index    = this.index,
 124             newValue = this.getNewValue();
 125
 126         if (this.constrain) {
 127             var above = slider.thumbs[index + 1],
 128                 below = slider.thumbs[index - 1];
 129
 130             if (below != undefined && newValue <= below.value) newValue = below.value;
 131             if (above != undefined && newValue >= above.value) newValue = above.value;
 132         }
 133
 134         slider.setValue(index, newValue, false);
 135         slider.fireEvent('drag', slider, e, this);
 136     },
 137
 138     getNewValue: function() {
 139         var slider   = this.slider,
 140             pos      = slider.innerEl.translatePoints(this.tracker.getXY());
 141
 142         return Ext.util.Format.round(slider.reverseValue(pos.left), slider.decimalPrecision);
 143     },
 144
 145     /**
 146      * @private
 147      * This is tied to the internal Ext.dd.DragTracker's onEnd template method. Removes the drag CSS class and
 148      * fires the 'changecomplete' event with the new value
 149      */
 150     onDragEnd: function(e) {
 151         var slider = this.slider,
 152             value  = this.value;
 153
 154         this.el.removeClass('x-slider-thumb-drag');
 155
 156         this.dragging = false;
 157         slider.fireEvent('dragend', slider, e);
 158
 159         if (this.dragStartValue != value) {
 160             slider.fireEvent('changecomplete', slider, value, this);
 161         }
 162     }
 163 });
 164
 165 /**
 166  * @class Ext.slider.MultiSlider
 167  * @extends Ext.BoxComponent
 168  * 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:
 169 <pre>
 170 new Ext.Slider({
 171     renderTo: Ext.getBody(),
 172     width: 200,
 173     value: 50,
 174     increment: 10,
 175     minValue: 0,
 176     maxValue: 100
 177 });
 178 </pre>
 179  * Sliders can be created with more than one thumb handle by passing an array of values instead of a single one:
 180 <pre>
 181 new Ext.Slider({
 182     renderTo: Ext.getBody(),
 183     width: 200,
 184     values: [25, 50, 75],
 185     minValue: 0,
 186     maxValue: 100,
 187
 188     //this defaults to true, setting to false allows the thumbs to pass each other
 189     {@link #constrainThumbs}: false
 190 });
 191 </pre>
 192  */
 193 Ext.slider.MultiSlider = Ext.extend(Ext.BoxComponent, {
 194     /**
 195      * @cfg {Number} value The value to initialize the slider with. Defaults to minValue.
 196      */
 197     /**
 198      * @cfg {Boolean} vertical Orient the Slider vertically rather than horizontally, defaults to false.
 199      */
 200     vertical: false,
 201     /**
 202      * @cfg {Number} minValue The minimum value for the Slider. Defaults to 0.
 203      */
 204     minValue: 0,
 205     /**
 206      * @cfg {Number} maxValue The maximum value for the Slider. Defaults to 100.
 207      */
 208     maxValue: 100,
 209     /**
 210      * @cfg {Number/Boolean} decimalPrecision.
 211      * <p>The number of decimal places to which to round the Slider's value. Defaults to 0.</p>
 212      * <p>To disable rounding, configure as <tt><b>false</b></tt>.</p>
 213      */
 214     decimalPrecision: 0,
 215     /**
 216      * @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.
 217      */
 218     keyIncrement: 1,
 219     /**
 220      * @cfg {Number} increment How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'.
 221      */
 222     increment: 0,
 223
 224     /**
 225      * @private
 226      * @property clickRange
 227      * @type Array
 228      * 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],
 229      * 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'
 230      * 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
 231      */
 232     clickRange: [5,15],
 233
 234     /**
 235      * @cfg {Boolean} clickToChange Determines whether or not clicking on the Slider axis will change the slider. Defaults to true
 236      */
 237     clickToChange : true,
 238     /**
 239      * @cfg {Boolean} animate Turn on or off animation. Defaults to true
 240      */
 241     animate: true,
 242
 243     /**
 244      * True while the thumb is in a drag operation
 245      * @type Boolean
 246      */
 247     dragging: false,
 248
 249     /**
 250      * @cfg {Boolean} constrainThumbs True to disallow thumbs from overlapping one another. Defaults to true
 251      */
 252     constrainThumbs: true,
 253
 254     /**
 255      * @private
 256      * @property topThumbZIndex
 257      * @type Number
 258      * The number used internally to set the z index of the top thumb (see promoteThumb for details)
 259      */
 260     topThumbZIndex: 10000,
 261
 262     // private override
 263     initComponent : function(){
 264         if(!Ext.isDefined(this.value)){
 265             this.value = this.minValue;
 266         }
 267
 268         /**
 269          * @property thumbs
 270          * @type Array
 271          * Array containing references to each thumb
 272          */
 273         this.thumbs = [];
 274
 275         Ext.slider.MultiSlider.superclass.initComponent.call(this);
 276
 277         this.keyIncrement = Math.max(this.increment, this.keyIncrement);
 278         this.addEvents(
 279             /**
 280              * @event beforechange
 281              * Fires before the slider value is changed. By returning false from an event handler,
 282              * you can cancel the event and prevent the slider from changing.
 283              * @param {Ext.Slider} slider The slider
 284              * @param {Number} newValue The new value which the slider is being changed to.
 285              * @param {Number} oldValue The old value which the slider was previously.
 286              */
 287             'beforechange',
 288
 289             /**
 290              * @event change
 291              * Fires when the slider value is changed.
 292              * @param {Ext.Slider} slider The slider
 293              * @param {Number} newValue The new value which the slider has been changed to.
 294              * @param {Ext.slider.Thumb} thumb The thumb that was changed
 295              */
 296             'change',
 297
 298             /**
 299              * @event changecomplete
 300              * Fires when the slider value is changed by the user and any drag operations have completed.
 301              * @param {Ext.Slider} slider The slider
 302              * @param {Number} newValue The new value which the slider has been changed to.
 303              * @param {Ext.slider.Thumb} thumb The thumb that was changed
 304              */
 305             'changecomplete',
 306
 307             /**
 308              * @event dragstart
 309              * Fires after a drag operation has started.
 310              * @param {Ext.Slider} slider The slider
 311              * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
 312              */
 313             'dragstart',
 314
 315             /**
 316              * @event drag
 317              * Fires continuously during the drag operation while the mouse is moving.
 318              * @param {Ext.Slider} slider The slider
 319              * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
 320              */
 321             'drag',
 322
 323             /**
 324              * @event dragend
 325              * Fires after the drag operation has completed.
 326              * @param {Ext.Slider} slider The slider
 327              * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
 328              */
 329             'dragend'
 330         );
 331
 332         /**
 333          * @property values
 334          * @type Array
 335          * Array of values to initalize the thumbs with
 336          */
 337         if (this.values == undefined || Ext.isEmpty(this.values)) this.values = [0];
 338
 339         var values = this.values;
 340
 341         for (var i=0; i < values.length; i++) {
 342             this.addThumb(values[i]);
 343         }
 344
 345         if(this.vertical){
 346             Ext.apply(this, Ext.slider.Vertical);
 347         }
 348     },
 349
 350     /**
 351      * Creates a new thumb and adds it to the slider
 352      * @param {Number} value The initial value to set on the thumb. Defaults to 0
 353      */
 354     addThumb: function(value) {
 355         var thumb = new Ext.slider.Thumb({
 356             value    : value,
 357             slider   : this,
 358             index    : this.thumbs.length,
 359             constrain: this.constrainThumbs
 360         });
 361         this.thumbs.push(thumb);
 362
 363         //render the thumb now if needed
 364         if (this.rendered) thumb.render();
 365     },
 366
 367     /**
 368      * @private
 369      * Moves the given thumb above all other by increasing its z-index. This is called when as drag
 370      * any thumb, so that the thumb that was just dragged is always at the highest z-index. This is
 371      * required when the thumbs are stacked on top of each other at one of the ends of the slider's
 372      * range, which can result in the user not being able to move any of them.
 373      * @param {Ext.slider.Thumb} topThumb The thumb to move to the top
 374      */
 375     promoteThumb: function(topThumb) {
 376         var thumbs = this.thumbs,
 377             zIndex, thumb;
 378
 379         for (var i = 0, j = thumbs.length; i < j; i++) {
 380             thumb = thumbs[i];
 381
 382             if (thumb == topThumb) {
 383                 zIndex = this.topThumbZIndex;
 384             } else {
 385                 zIndex = '';
 386             }
 387
 388             thumb.el.setStyle('zIndex', zIndex);
 389         }
 390     },
 391
 392     // private override
 393     onRender : function() {
 394         this.autoEl = {
 395             cls: 'x-slider ' + (this.vertical ? 'x-slider-vert' : 'x-slider-horz'),
 396             cn : {
 397                 cls: 'x-slider-end',
 398                 cn : {
 399                     cls:'x-slider-inner',
 400                     cn : [{tag:'a', cls:'x-slider-focus', href:"#", tabIndex: '-1', hidefocus:'on'}]
 401                 }
 402             }
 403         };
 404
 405         Ext.slider.MultiSlider.superclass.onRender.apply(this, arguments);
 406
 407         this.endEl   = this.el.first();
 408         this.innerEl = this.endEl.first();
 409         this.focusEl = this.innerEl.child('.x-slider-focus');
 410
 411         //render each thumb
 412         for (var i=0; i < this.thumbs.length; i++) {
 413             this.thumbs[i].render();
 414         }
 415
 416         //calculate the size of half a thumb
 417         var thumb      = this.innerEl.child('.x-slider-thumb');
 418         this.halfThumb = (this.vertical ? thumb.getHeight() : thumb.getWidth()) / 2;
 419
 420         this.initEvents();
 421     },
 422
 423     /**
 424      * @private
 425      * Adds keyboard and mouse listeners on this.el. Ignores click events on the internal focus element.
 426      * Creates a new DragTracker which is used to control what happens when the user drags the thumb around.
 427      */
 428     initEvents : function(){
 429         this.mon(this.el, {
 430             scope    : this,
 431             mousedown: this.onMouseDown,
 432             keydown  : this.onKeyDown
 433         });
 434
 435         this.focusEl.swallowEvent("click", true);
 436     },
 437
 438     /**
 439      * @private
 440      * Mousedown handler for the slider. If the clickToChange is enabled and the click was not on the draggable 'thumb',
 441      * this calculates the new value of the slider and tells the implementation (Horizontal or Vertical) to move the thumb
 442      * @param {Ext.EventObject} e The click event
 443      */
 444     onMouseDown : function(e){
 445         if(this.disabled){
 446             return;
 447         }
 448
 449         //see if the click was on any of the thumbs
 450         var thumbClicked = false;
 451         for (var i=0; i < this.thumbs.length; i++) {
 452             thumbClicked = thumbClicked || e.target == this.thumbs[i].el.dom;
 453         }
 454
 455         if (this.clickToChange && !thumbClicked) {
 456             var local = this.innerEl.translatePoints(e.getXY());
 457             this.onClickChange(local);
 458         }
 459         this.focus();
 460     },
 461
 462     /**
 463      * @private
 464      * Moves the thumb to the indicated position. Note that a Vertical implementation is provided in Ext.slider.Vertical.
 465      * Only changes the value if the click was within this.clickRange.
 466      * @param {Object} local Object containing top and left values for the click event.
 467      */
 468     onClickChange : function(local) {
 469         if (local.top > this.clickRange[0] && local.top < this.clickRange[1]) {
 470             //find the nearest thumb to the click event
 471             var thumb = this.getNearest(local, 'left'),
 472                 index = thumb.index;
 473
 474             this.setValue(index, Ext.util.Format.round(this.reverseValue(local.left), this.decimalPrecision), undefined, true);
 475         }
 476     },
 477
 478     /**
 479      * @private
 480      * Returns the nearest thumb to a click event, along with its distance
 481      * @param {Object} local Object containing top and left values from a click event
 482      * @param {String} prop The property of local to compare on. Use 'left' for horizontal sliders, 'top' for vertical ones
 483      * @return {Object} The closest thumb object and its distance from the click event
 484      */
 485     getNearest: function(local, prop) {
 486         var localValue = prop == 'top' ? this.innerEl.getHeight() - local[prop] : local[prop],
 487             clickValue = this.reverseValue(localValue),
 488             nearestDistance = (this.maxValue - this.minValue) + 5, //add a small fudge for the end of the slider
 489             index = 0,
 490             nearest = null;
 491
 492         for (var i=0; i < this.thumbs.length; i++) {
 493             var thumb = this.thumbs[i],
 494                 value = thumb.value,
 495                 dist  = Math.abs(value - clickValue);
 496
 497             if (Math.abs(dist <= nearestDistance)) {
 498                 nearest = thumb;
 499                 index = i;
 500                 nearestDistance = dist;
 501             }
 502         }
 503         return nearest;
 504     },
 505
 506     /**
 507      * @private
 508      * Handler for any keypresses captured by the slider. If the key is UP or RIGHT, the thumb is moved along to the right
 509      * by this.keyIncrement. If DOWN or LEFT it is moved left. Pressing CTRL moves the slider to the end in either direction
 510      * @param {Ext.EventObject} e The Event object
 511      */
 512     onKeyDown : function(e){
 513         /*
 514          * The behaviour for keyboard handling with multiple thumbs is currently undefined.
 515          * There's no real sane default for it, so leave it like this until we come up
 516          * with a better way of doing it.
 517          */
 518         if(this.disabled || this.thumbs.length !== 1){
 519             e.preventDefault();
 520             return;
 521         }
 522         var k = e.getKey(),
 523             val;
 524         switch(k){
 525             case e.UP:
 526             case e.RIGHT:
 527                 e.stopEvent();
 528                 val = e.ctrlKey ? this.maxValue : this.getValue(0) + this.keyIncrement;
 529                 this.setValue(0, val, undefined, true);
 530             break;
 531             case e.DOWN:
 532             case e.LEFT:
 533                 e.stopEvent();
 534                 val = e.ctrlKey ? this.minValue : this.getValue(0) - this.keyIncrement;
 535                 this.setValue(0, val, undefined, true);
 536             break;
 537             default:
 538                 e.preventDefault();
 539         }
 540     },
 541
 542     /**
 543      * @private
 544      * If using snapping, this takes a desired new value and returns the closest snapped
 545      * value to it
 546      * @param {Number} value The unsnapped value
 547      * @return {Number} The value of the nearest snap target
 548      */
 549     doSnap : function(value){
 550         if (!(this.increment && value)) {
 551             return value;
 552         }
 553         var newValue = value,
 554             inc = this.increment,
 555             m = value % inc;
 556         if (m != 0) {
 557             newValue -= m;
 558             if (m * 2 >= inc) {
 559                 newValue += inc;
 560             } else if (m * 2 < -inc) {
 561                 newValue -= inc;
 562             }
 563         }
 564         return newValue.constrain(this.minValue,  this.maxValue);
 565     },
 566
 567     // private
 568     afterRender : function(){
 569         Ext.slider.MultiSlider.superclass.afterRender.apply(this, arguments);
 570
 571         for (var i=0; i < this.thumbs.length; i++) {
 572             var thumb = this.thumbs[i];
 573
 574             if (thumb.value !== undefined) {
 575                 var v = this.normalizeValue(thumb.value);
 576
 577                 if (v !== thumb.value) {
 578                     // delete this.value;
 579                     this.setValue(i, v, false);
 580                 } else {
 581                     this.moveThumb(i, this.translateValue(v), false);
 582                 }
 583             }
 584         };
 585     },
 586
 587     /**
 588      * @private
 589      * Returns the ratio of pixels to mapped values. e.g. if the slider is 200px wide and maxValue - minValue is 100,
 590      * the ratio is 2
 591      * @return {Number} The ratio of pixels to mapped values
 592      */
 593     getRatio : function(){
 594         var w = this.innerEl.getWidth(),
 595             v = this.maxValue - this.minValue;
 596         return v == 0 ? w : (w/v);
 597     },
 598
 599     /**
 600      * @private
 601      * Returns a snapped, constrained value when given a desired value
 602      * @param {Number} value Raw number value
 603      * @return {Number} The raw value rounded to the correct d.p. and constrained within the set max and min values
 604      */
 605     normalizeValue : function(v){
 606         v = this.doSnap(v);
 607         v = Ext.util.Format.round(v, this.decimalPrecision);
 608         v = v.constrain(this.minValue, this.maxValue);
 609         return v;
 610     },
 611
 612     /**
 613      * Sets the minimum value for the slider instance. If the current value is less than the
 614      * minimum value, the current value will be changed.
 615      * @param {Number} val The new minimum value
 616      */
 617     setMinValue : function(val){
 618         this.minValue = val;
 619         var i = 0,
 620             thumbs = this.thumbs,
 621             len = thumbs.length,
 622             t;
 623
 624         for(; i < len; ++i){
 625             t = thumbs[i];
 626             t.value = t.value < val ? val : t.value;
 627         }
 628         this.syncThumb();
 629     },
 630
 631     /**
 632      * Sets the maximum value for the slider instance. If the current value is more than the
 633      * maximum value, the current value will be changed.
 634      * @param {Number} val The new maximum value
 635      */
 636     setMaxValue : function(val){
 637         this.maxValue = val;
 638         var i = 0,
 639             thumbs = this.thumbs,
 640             len = thumbs.length,
 641             t;
 642
 643         for(; i < len; ++i){
 644             t = thumbs[i];
 645             t.value = t.value > val ? val : t.value;
 646         }
 647         this.syncThumb();
 648     },
 649
 650     /**
 651      * Programmatically sets the value of the Slider. Ensures that the value is constrained within
 652      * the minValue and maxValue.
 653      * @param {Number} index Index of the thumb to move
 654      * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue)
 655      * @param {Boolean} animate Turn on or off animation, defaults to true
 656      */
 657     setValue : function(index, v, animate, changeComplete) {
 658         var thumb = this.thumbs[index],
 659             el    = thumb.el;
 660
 661         v = this.normalizeValue(v);
 662
 663         if (v !== thumb.value && this.fireEvent('beforechange', this, v, thumb.value, thumb) !== false) {
 664             thumb.value = v;
 665             if(this.rendered){
 666                 this.moveThumb(index, this.translateValue(v), animate !== false);
 667                 this.fireEvent('change', this, v, thumb);
 668                 if(changeComplete){
 669                     this.fireEvent('changecomplete', this, v, thumb);
 670                 }
 671             }
 672         }
 673     },
 674
 675     /**
 676      * @private
 677      */
 678     translateValue : function(v) {
 679         var ratio = this.getRatio();
 680         return (v * ratio) - (this.minValue * ratio) - this.halfThumb;
 681     },
 682
 683     /**
 684      * @private
 685      * Given a pixel location along the slider, returns the mapped slider value for that pixel.
 686      * E.g. if we have a slider 200px wide with minValue = 100 and maxValue = 500, reverseValue(50)
 687      * returns 200
 688      * @param {Number} pos The position along the slider to return a mapped value for
 689      * @return {Number} The mapped value for the given position
 690      */
 691     reverseValue : function(pos){
 692         var ratio = this.getRatio();
 693         return (pos + (this.minValue * ratio)) / ratio;
 694     },
 695
 696     /**
 697      * @private
 698      * @param {Number} index Index of the thumb to move
 699      */
 700     moveThumb: function(index, v, animate){
 701         var thumb = this.thumbs[index].el;
 702
 703         if(!animate || this.animate === false){
 704             thumb.setLeft(v);
 705         }else{
 706             thumb.shift({left: v, stopFx: true, duration:.35});
 707         }
 708     },
 709
 710     // private
 711     focus : function(){
 712         this.focusEl.focus(10);
 713     },
 714
 715     // private
 716     onResize : function(w, h){
 717         var thumbs = this.thumbs,
 718             len = thumbs.length,
 719             i = 0;
 720
 721         /*
 722          * If we happen to be animating during a resize, the position of the thumb will likely be off
 723          * when the animation stops. As such, just stop any animations before syncing the thumbs.
 724          */
 725         for(; i < len; ++i){
 726             thumbs[i].el.stopFx();
 727         }
 728         this.innerEl.setWidth(w - (this.el.getPadding('l') + this.endEl.getPadding('r')));
 729         this.syncThumb();
 730         Ext.slider.MultiSlider.superclass.onResize.apply(this, arguments);
 731     },
 732
 733     //private
 734     onDisable: function(){
 735         Ext.slider.MultiSlider.superclass.onDisable.call(this);
 736
 737         for (var i=0; i < this.thumbs.length; i++) {
 738             var thumb = this.thumbs[i],
 739                 el    = thumb.el;
 740
 741             thumb.disable();
 742
 743             if(Ext.isIE){
 744                 //IE breaks when using overflow visible and opacity other than 1.
 745                 //Create a place holder for the thumb and display it.
 746                 var xy = el.getXY();
 747                 el.hide();
 748
 749                 this.innerEl.addClass(this.disabledClass).dom.disabled = true;
 750
 751                 if (!this.thumbHolder) {
 752                     this.thumbHolder = this.endEl.createChild({cls: 'x-slider-thumb ' + this.disabledClass});
 753                 }
 754
 755                 this.thumbHolder.show().setXY(xy);
 756             }
 757         }
 758     },
 759
 760     //private
 761     onEnable: function(){
 762         Ext.slider.MultiSlider.superclass.onEnable.call(this);
 763
 764         for (var i=0; i < this.thumbs.length; i++) {
 765             var thumb = this.thumbs[i],
 766                 el    = thumb.el;
 767
 768             thumb.enable();
 769
 770             if (Ext.isIE) {
 771                 this.innerEl.removeClass(this.disabledClass).dom.disabled = false;
 772
 773                 if (this.thumbHolder) this.thumbHolder.hide();
 774
 775                 el.show();
 776                 this.syncThumb();
 777             }
 778         }
 779     },
 780
 781     /**
 782      * Synchronizes the thumb position to the proper proportion of the total component width based
 783      * on the current slider {@link #value}.  This will be called automatically when the Slider
 784      * is resized by a layout, but if it is rendered auto width, this method can be called from
 785      * another resize handler to sync the Slider if necessary.
 786      */
 787     syncThumb : function() {
 788         if (this.rendered) {
 789             for (var i=0; i < this.thumbs.length; i++) {
 790                 this.moveThumb(i, this.translateValue(this.thumbs[i].value));
 791             }
 792         }
 793     },
 794
 795     /**
 796      * Returns the current value of the slider
 797      * @param {Number} index The index of the thumb to return a value for
 798      * @return {Number} The current value of the slider
 799      */
 800     getValue : function(index) {
 801         return this.thumbs[index].value;
 802     },
 803
 804     /**
 805      * Returns an array of values - one for the location of each thumb
 806      * @return {Array} The set of thumb values
 807      */
 808     getValues: function() {
 809         var values = [];
 810
 811         for (var i=0; i < this.thumbs.length; i++) {
 812             values.push(this.thumbs[i].value);
 813         }
 814
 815         return values;
 816     },
 817
 818     // private
 819     beforeDestroy : function(){
 820         Ext.destroyMembers(this, 'endEl', 'innerEl', 'thumb', 'halfThumb', 'focusEl', 'tracker', 'thumbHolder');
 821         Ext.slider.MultiSlider.superclass.beforeDestroy.call(this);
 822     }
 823 });
 824
 825 Ext.reg('multislider', Ext.slider.MultiSlider);
 826
 827 /**
 828  * @class Ext.slider.SingleSlider
 829  * @extends Ext.slider.MultiSlider
 830  * Slider which supports vertical or horizontal orientation, keyboard adjustments,
 831  * configurable snapping, axis clicking and animation. Can be added as an item to
 832  * any container. Example usage:
 833 <pre><code>
 834 new Ext.slider.SingleSlider({
 835     renderTo: Ext.getBody(),
 836     width: 200,
 837     value: 50,
 838     increment: 10,
 839     minValue: 0,
 840     maxValue: 100
 841 });
 842 </code></pre>
 843  * The class Ext.slider.SingleSlider is aliased to Ext.Slider for backwards compatibility.
 844  */
 845 Ext.slider.SingleSlider = Ext.extend(Ext.slider.MultiSlider, {
 846     constructor: function(config) {
 847       config = config || {};
 848
 849       Ext.applyIf(config, {
 850           values: [config.value || 0]
 851       });
 852
 853       Ext.slider.SingleSlider.superclass.constructor.call(this, config);
 854     },
 855
 856     /**
 857      * Returns the current value of the slider
 858      * @return {Number} The current value of the slider
 859      */
 860     getValue: function() {
 861         //just returns the value of the first thumb, which should be the only one in a single slider
 862         return Ext.slider.SingleSlider.superclass.getValue.call(this, 0);
 863     },
 864
 865     /**
 866      * Programmatically sets the value of the Slider. Ensures that the value is constrained within
 867      * the minValue and maxValue.
 868      * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue)
 869      * @param {Boolean} animate Turn on or off animation, defaults to true
 870      */
 871     setValue: function(value, animate) {
 872         var args = Ext.toArray(arguments),
 873             len  = args.length;
 874
 875         //this is to maintain backwards compatiblity for sliders with only one thunb. Usually you must pass the thumb
 876         //index to setValue, but if we only have one thumb we inject the index here first if given the multi-slider
 877         //signature without the required index. The index will always be 0 for a single slider
 878         if (len == 1 || (len <= 3 && typeof arguments[1] != 'number')) {
 879             args.unshift(0);
 880         }
 881
 882         return Ext.slider.SingleSlider.superclass.setValue.apply(this, args);
 883     },
 884
 885     /**
 886      * Synchronizes the thumb position to the proper proportion of the total component width based
 887      * on the current slider {@link #value}.  This will be called automatically when the Slider
 888      * is resized by a layout, but if it is rendered auto width, this method can be called from
 889      * another resize handler to sync the Slider if necessary.
 890      */
 891     syncThumb : function() {
 892         return Ext.slider.SingleSlider.superclass.syncThumb.apply(this, [0].concat(arguments));
 893     },
 894
 895     // private
 896     getNearest : function(){
 897         // Since there's only 1 thumb, it's always the nearest
 898         return this.thumbs[0];
 899     }
 900 });
 901
 902 //backwards compatibility
 903 Ext.Slider = Ext.slider.SingleSlider;
 904
 905 Ext.reg('slider', Ext.slider.SingleSlider);
 906
 907 // private class to support vertical sliders
 908 Ext.slider.Vertical = {
 909     onResize : function(w, h){
 910         this.innerEl.setHeight(h - (this.el.getPadding('t') + this.endEl.getPadding('b')));
 911         this.syncThumb();
 912     },
 913
 914     getRatio : function(){
 915         var h = this.innerEl.getHeight(),
 916             v = this.maxValue - this.minValue;
 917         return h/v;
 918     },
 919
 920     moveThumb: function(index, v, animate) {
 921         var thumb = this.thumbs[index],
 922             el    = thumb.el;
 923
 924         if (!animate || this.animate === false) {
 925             el.setBottom(v);
 926         } else {
 927             el.shift({bottom: v, stopFx: true, duration:.35});
 928         }
 929     },
 930
 931     onClickChange : function(local) {
 932         if (local.left > this.clickRange[0] && local.left < this.clickRange[1]) {
 933             var thumb = this.getNearest(local, 'top'),
 934                 index = thumb.index,
 935                 value = this.minValue + this.reverseValue(this.innerEl.getHeight() - local.top);
 936
 937             this.setValue(index, Ext.util.Format.round(value, this.decimalPrecision), undefined, true);
 938         }
 939     }
 940 };
 941
 942 //private class to support vertical dragging of thumbs within a slider
 943 Ext.slider.Thumb.Vertical = {
 944     getNewValue: function() {
 945         var slider   = this.slider,
 946             innerEl  = slider.innerEl,
 947             pos      = innerEl.translatePoints(this.tracker.getXY()),
 948             bottom   = innerEl.getHeight() - pos.top;
 949
 950         return slider.minValue + Ext.util.Format.round(bottom / slider.getRatio(), slider.decimalPrecision);
 951     }
 952 };