docs/source/Slider.html

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