git.ithinksw.org / extjs.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Multi.html
diff --git a/docs/source/Multi.html b/docs/source/Multi.html
index 8ebcbe8..bcbcdb1 100644 (file)
--- a/docs/source/Multi.html
+++ b/docs/source/Multi.html
@@ -1,25 +1,38 @@
-<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-slider.Multi'>/**
-</span> * @class Ext.slider.Multi
- * @extends Ext.form.field.Base
- * &lt;p&gt;Slider which supports vertical or horizontal orientation, keyboard adjustments, configurable snapping, axis
- * clicking and animation. Can be added as an item to any container. In addition,  
- * {@img Ext.slider.Multi/Ext.slider.Multi.png Ext.slider.Multi component}
- * &lt;p&gt;Example usage:&lt;/p&gt;
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <title>The source code</title>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+  <style type="text/css">
+    .highlight { display: block; background-color: #ddd; }
+  </style>
+  <script type="text/javascript">
+    function highlight() {
+      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+    }
+  </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+  <pre class="prettyprint lang-js"><span id='Ext-slider-Multi'>/**
+</span> * Slider which supports vertical or horizontal orientation, keyboard adjustments, configurable snapping, axis clicking
+ * and animation. Can be added as an item to any container.
+ *
  * Sliders can be created with more than one thumb handle by passing an array of values instead of a single one:
  * Sliders can be created with more than one thumb handle by passing an array of values instead of a single one:
-&lt;pre&gt;
-    Ext.create('Ext.slider.Multi', {
-        width: 200,
-        values: [25, 50, 75],
-        increment: 5,
-        minValue: 0,
-        maxValue: 100,
-
-        //this defaults to true, setting to false allows the thumbs to pass each other
-        {@link #constrainThumbs}: false,
-        renderTo: Ext.getBody()
-    });  
-&lt;/pre&gt;
- * @xtype multislider
+ *
+ *     @example
+ *     Ext.create('Ext.slider.Multi', {
+ *         width: 200,
+ *         values: [25, 50, 75],
+ *         increment: 5,
+ *         minValue: 0,
+ *         maxValue: 100,
+ *
+ *         // this defaults to true, setting to false allows the thumbs to pass each other
+ *         constrainThumbs: false,
+ *         renderTo: Ext.getBody()
+ *     });
  */
 Ext.define('Ext.slider.Multi', {
     extend: 'Ext.form.field.Base',
  */
 Ext.define('Ext.slider.Multi', {
     extend: 'Ext.form.field.Base',
@@ -35,11 +48,12 @@ Ext.define('Ext.slider.Multi', {
         'Ext.layout.component.field.Slider'
     ],
 
         'Ext.layout.component.field.Slider'
     ],
 
+    // note: {id} here is really {inputId}, but {cmpId} is available
     fieldSubTpl: [
     fieldSubTpl: [
-        '&lt;div class=&quot;' + Ext.baseCSSPrefix + 'slider {fieldCls} {vertical}&quot; aria-valuemin=&quot;{minValue}&quot; aria-valuemax=&quot;{maxValue}&quot; aria-valuenow=&quot;{value}&quot; aria-valuetext=&quot;{value}&quot;&gt;',
-            '&lt;div class=&quot;' + Ext.baseCSSPrefix + 'slider-end&quot; role=&quot;presentation&quot;&gt;',
-                '&lt;div class=&quot;' + Ext.baseCSSPrefix + 'slider-inner&quot; role=&quot;presentation&quot;&gt;',
-                    '&lt;a class=&quot;' + Ext.baseCSSPrefix + 'slider-focus&quot; href=&quot;#&quot; tabIndex=&quot;-1&quot; hidefocus=&quot;on&quot; role=&quot;presentation&quot;&gt;&lt;/a&gt;',
+        '&lt;div id=&quot;{id}&quot; class=&quot;' + Ext.baseCSSPrefix + 'slider {fieldCls} {vertical}&quot; aria-valuemin=&quot;{minValue}&quot; aria-valuemax=&quot;{maxValue}&quot; aria-valuenow=&quot;{value}&quot; aria-valuetext=&quot;{value}&quot;&gt;',
+            '&lt;div id=&quot;{cmpId}-endEl&quot; class=&quot;' + Ext.baseCSSPrefix + 'slider-end&quot; role=&quot;presentation&quot;&gt;',
+                '&lt;div id=&quot;{cmpId}-innerEl&quot; class=&quot;' + Ext.baseCSSPrefix + 'slider-inner&quot; role=&quot;presentation&quot;&gt;',
+                    '&lt;a id=&quot;{cmpId}-focusEl&quot; class=&quot;' + Ext.baseCSSPrefix + 'slider-focus&quot; href=&quot;#&quot; tabIndex=&quot;-1&quot; hidefocus=&quot;on&quot; role=&quot;presentation&quot;&gt;&lt;/a&gt;',
                 '&lt;/div&gt;',
             '&lt;/div&gt;',
         '&lt;/div&gt;',
                 '&lt;/div&gt;',
             '&lt;/div&gt;',
         '&lt;/div&gt;',
@@ -49,88 +63,101 @@ Ext.define('Ext.slider.Multi', {
         }
     ],
 
         }
     ],
 
-<span id='Ext-slider.Multi-cfg-value'>    /**
+<span id='Ext-slider-Multi-cfg-value'>    /**
 </span>     * @cfg {Number} value
 </span>     * @cfg {Number} value
-     * A value with which to initialize the slider. Defaults to minValue. Setting this will only
-     * result in the creation of a single slider thumb; if you want multiple thumbs then use the
-     * {@link #values} config instead.
+     * A value with which to initialize the slider. Defaults to minValue. Setting this will only result in the creation
+     * of a single slider thumb; if you want multiple thumbs then use the {@link #values} config instead.
      */
 
      */
 
-<span id='Ext-slider.Multi-cfg-values'>    /**
-</span>     * @cfg {Array} values
-     * Array of Number values with which to initalize the slider. A separate slider thumb will be created for
-     * each value in this array. This will take precedence over the single {@link #value} config.
+<span id='Ext-slider-Multi-cfg-values'>    /**
+</span>     * @cfg {Number[]} values
+     * Array of Number values with which to initalize the slider. A separate slider thumb will be created for each value
+     * in this array. This will take precedence over the single {@link #value} config.
      */
 
      */
 
-<span id='Ext-slider.Multi-cfg-vertical'>    /**
-</span>     * @cfg {Boolean} vertical Orient the Slider vertically rather than horizontally, defaults to false.
+<span id='Ext-slider-Multi-cfg-vertical'>    /**
+</span>     * @cfg {Boolean} vertical
+     * Orient the Slider vertically rather than horizontally.
      */
     vertical: false,
      */
     vertical: false,
-<span id='Ext-slider.Multi-cfg-minValue'>    /**
-</span>     * @cfg {Number} minValue The minimum value for the Slider. Defaults to 0.
+
+<span id='Ext-slider-Multi-cfg-minValue'>    /**
+</span>     * @cfg {Number} minValue
+     * The minimum value for the Slider.
      */
     minValue: 0,
      */
     minValue: 0,
-<span id='Ext-slider.Multi-cfg-maxValue'>    /**
-</span>     * @cfg {Number} maxValue The maximum value for the Slider. Defaults to 100.
+
+<span id='Ext-slider-Multi-cfg-maxValue'>    /**
+</span>     * @cfg {Number} maxValue
+     * The maximum value for the Slider.
      */
     maxValue: 100,
      */
     maxValue: 100,
-<span id='Ext-slider.Multi-cfg-decimalPrecision'>    /**
-</span>     * @cfg {Number/Boolean} decimalPrecision.
-     * &lt;p&gt;The number of decimal places to which to round the Slider's value. Defaults to 0.&lt;/p&gt;
-     * &lt;p&gt;To disable rounding, configure as &lt;tt&gt;&lt;b&gt;false&lt;/b&gt;&lt;/tt&gt;.&lt;/p&gt;
+
+<span id='Ext-slider-Multi-cfg-decimalPrecision'>    /**
+</span>     * @cfg {Number/Boolean} decimalPrecision The number of decimal places to which to round the Slider's value.
+     *
+     * To disable rounding, configure as **false**.
      */
     decimalPrecision: 0,
      */
     decimalPrecision: 0,
-<span id='Ext-slider.Multi-cfg-keyIncrement'>    /**
-</span>     * @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.
+
+<span id='Ext-slider-Multi-cfg-keyIncrement'>    /**
+</span>     * @cfg {Number} keyIncrement
+     * How many units to change the Slider when adjusting with keyboard navigation. If the increment
+     * config is larger, it will be used instead.
      */
     keyIncrement: 1,
      */
     keyIncrement: 1,
-<span id='Ext-slider.Multi-cfg-increment'>    /**
-</span>     * @cfg {Number} increment How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'.
+
+<span id='Ext-slider-Multi-cfg-increment'>    /**
+</span>     * @cfg {Number} increment
+     * How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'.
      */
     increment: 0,
 
      */
     increment: 0,
 
-<span id='Ext-slider.Multi-property-clickRange'>    /**
+<span id='Ext-slider-Multi-property-clickRange'>    /**
 </span>     * @private
 </span>     * @private
-     * @property clickRange
-     * @type Array
+     * @property {Number[]} clickRange
      * 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],
      * 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'
      * 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
      */
     clickRange: [5,15],
 
      * 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],
      * 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'
      * 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
      */
     clickRange: [5,15],
 
-<span id='Ext-slider.Multi-cfg-clickToChange'>    /**
-</span>     * @cfg {Boolean} clickToChange Determines whether or not clicking on the Slider axis will change the slider. Defaults to true
+<span id='Ext-slider-Multi-cfg-clickToChange'>    /**
+</span>     * @cfg {Boolean} clickToChange
+     * Determines whether or not clicking on the Slider axis will change the slider.
      */
     clickToChange : true,
      */
     clickToChange : true,
-<span id='Ext-slider.Multi-cfg-animate'>    /**
-</span>     * @cfg {Boolean} animate Turn on or off animation. Defaults to true
+
+<span id='Ext-slider-Multi-cfg-animate'>    /**
+</span>     * @cfg {Boolean} animate
+     * Turn on or off animation.
      */
     animate: true,
 
      */
     animate: true,
 
-<span id='Ext-slider.Multi-property-dragging'>    /**
-</span>     * True while the thumb is in a drag operation
-     * @type Boolean
+<span id='Ext-slider-Multi-property-dragging'>    /**
+</span>     * @property {Boolean} dragging
+     * True while the thumb is in a drag operation
      */
     dragging: false,
 
      */
     dragging: false,
 
-<span id='Ext-slider.Multi-cfg-constrainThumbs'>    /**
-</span>     * @cfg {Boolean} constrainThumbs True to disallow thumbs from overlapping one another. Defaults to true
+<span id='Ext-slider-Multi-cfg-constrainThumbs'>    /**
+</span>     * @cfg {Boolean} constrainThumbs
+     * True to disallow thumbs from overlapping one another.
      */
     constrainThumbs: true,
 
     componentLayout: 'sliderfield',
 
      */
     constrainThumbs: true,
 
     componentLayout: 'sliderfield',
 
-<span id='Ext-slider.Multi-cfg-useTips'>    /**
+<span id='Ext-slider-Multi-cfg-useTips'>    /**
 </span>     * @cfg {Boolean} useTips
 </span>     * @cfg {Boolean} useTips
-     * True to use an Ext.slider.Tip to display tips for the value. Defaults to &lt;tt&gt;true&lt;/tt&gt;.
+     * True to use an Ext.slider.Tip to display tips for the value.
      */
     useTips : true,
 
      */
     useTips : true,
 
-<span id='Ext-slider.Multi-cfg-tipText'>    /**
+<span id='Ext-slider-Multi-cfg-tipText'>    /**
 </span>     * @cfg {Function} tipText
 </span>     * @cfg {Function} tipText
-     * A function used to display custom text for the slider tip. Defaults to &lt;tt&gt;null&lt;/tt&gt;, which will
-     * use the default on the plugin.
+     * A function used to display custom text for the slider tip. Defaults to null, which will use the default on the
+     * plugin.
      */
     tipText : null,
 
      */
     tipText : null,
 
@@ -159,10 +186,9 @@ Ext.define('Ext.slider.Multi', {
         var me = this,
             tipPlug,
             hasTip;
         var me = this,
             tipPlug,
             hasTip;
-        
-<span id='Ext-slider.Multi-property-thumbs'>        /**
-</span>         * @property thumbs
-         * @type Array
+
+<span id='Ext-slider-Multi-property-thumbs'>        /**
+</span>         * @property {Array} thumbs
          * Array containing references to each thumb
          */
         me.thumbs = [];
          * Array containing references to each thumb
          */
         me.thumbs = [];
@@ -170,17 +196,17 @@ Ext.define('Ext.slider.Multi', {
         me.keyIncrement = Math.max(me.increment, me.keyIncrement);
 
         me.addEvents(
         me.keyIncrement = Math.max(me.increment, me.keyIncrement);
 
         me.addEvents(
-<span id='Ext-slider.Multi-event-beforechange'>            /**
+<span id='Ext-slider-Multi-event-beforechange'>            /**
 </span>             * @event beforechange
 </span>             * @event beforechange
-             * Fires before the slider value is changed. By returning false from an event handler,
-             * you can cancel the event and prevent the slider from changing.
+             * Fires before the slider value is changed. By returning false from an event handler, you can cancel the
+             * event and prevent the slider from changing.
              * @param {Ext.slider.Multi} slider The slider
              * @param {Number} newValue The new value which the slider is being changed to.
              * @param {Number} oldValue The old value which the slider was previously.
              */
             'beforechange',
 
              * @param {Ext.slider.Multi} slider The slider
              * @param {Number} newValue The new value which the slider is being changed to.
              * @param {Number} oldValue The old value which the slider was previously.
              */
             'beforechange',
 
-<span id='Ext-slider.Multi-event-change'>            /**
+<span id='Ext-slider-Multi-event-change'>            /**
 </span>             * @event change
              * Fires when the slider value is changed.
              * @param {Ext.slider.Multi} slider The slider
 </span>             * @event change
              * Fires when the slider value is changed.
              * @param {Ext.slider.Multi} slider The slider
@@ -189,7 +215,7 @@ Ext.define('Ext.slider.Multi', {
              */
             'change',
 
              */
             'change',
 
-<span id='Ext-slider.Multi-event-changecomplete'>            /**
+<span id='Ext-slider-Multi-event-changecomplete'>            /**
 </span>             * @event changecomplete
              * Fires when the slider value is changed by the user and any drag operations have completed.
              * @param {Ext.slider.Multi} slider The slider
 </span>             * @event changecomplete
              * Fires when the slider value is changed by the user and any drag operations have completed.
              * @param {Ext.slider.Multi} slider The slider
@@ -198,7 +224,7 @@ Ext.define('Ext.slider.Multi', {
              */
             'changecomplete',
 
              */
             'changecomplete',
 
-<span id='Ext-slider.Multi-event-dragstart'>            /**
+<span id='Ext-slider-Multi-event-dragstart'>            /**
 </span>             * @event dragstart
              * Fires after a drag operation has started.
              * @param {Ext.slider.Multi} slider The slider
 </span>             * @event dragstart
              * Fires after a drag operation has started.
              * @param {Ext.slider.Multi} slider The slider
@@ -206,7 +232,7 @@ Ext.define('Ext.slider.Multi', {
              */
             'dragstart',
 
              */
             'dragstart',
 
-<span id='Ext-slider.Multi-event-drag'>            /**
+<span id='Ext-slider-Multi-event-drag'>            /**
 </span>             * @event drag
              * Fires continuously during the drag operation while the mouse is moving.
              * @param {Ext.slider.Multi} slider The slider
 </span>             * @event drag
              * Fires continuously during the drag operation while the mouse is moving.
              * @param {Ext.slider.Multi} slider The slider
@@ -214,7 +240,7 @@ Ext.define('Ext.slider.Multi', {
              */
             'drag',
 
              */
             'drag',
 
-<span id='Ext-slider.Multi-event-dragend'>            /**
+<span id='Ext-slider-Multi-event-dragend'>            /**
 </span>             * @event dragend
              * Fires after the drag operation has completed.
              * @param {Ext.slider.Multi} slider The slider
 </span>             * @event dragend
              * Fires after the drag operation has completed.
              * @param {Ext.slider.Multi} slider The slider
@@ -245,7 +271,7 @@ Ext.define('Ext.slider.Multi', {
         }
     },
 
         }
     },
 
-<span id='Ext-slider.Multi-method-addThumb'>    /**
+<span id='Ext-slider-Multi-method-addThumb'>    /**
 </span>     * Creates a new thumb and adds it to the slider
      * @param {Number} value The initial value to set on the thumb. Defaults to 0
      * @return {Ext.slider.Thumb} The thumb
 </span>     * Creates a new thumb and adds it to the slider
      * @param {Number} value The initial value to set on the thumb. Defaults to 0
      * @return {Ext.slider.Thumb} The thumb
@@ -268,7 +294,7 @@ Ext.define('Ext.slider.Multi', {
         return thumb;
     },
 
         return thumb;
     },
 
-<span id='Ext-slider.Multi-method-promoteThumb'>    /**
+<span id='Ext-slider-Multi-method-promoteThumb'>    /**
 </span>     * @private
      * Moves the given thumb above all other by increasing its z-index. This is called when as drag
      * any thumb, so that the thumb that was just dragged is always at the highest z-index. This is
 </span>     * @private
      * Moves the given thumb above all other by increasing its z-index. This is called when as drag
      * any thumb, so that the thumb that was just dragged is always at the highest z-index. This is
@@ -280,7 +306,7 @@ Ext.define('Ext.slider.Multi', {
         var thumbs = this.thumbs,
             ln = thumbs.length,
             zIndex, thumb, i;
         var thumbs = this.thumbs,
             ln = thumbs.length,
             zIndex, thumb, i;
-            
+
         for (i = 0; i &lt; ln; i++) {
             thumb = thumbs[i];
 
         for (i = 0; i &lt; ln; i++) {
             thumb = thumbs[i];
 
@@ -307,11 +333,7 @@ Ext.define('Ext.slider.Multi', {
             value: me.value
         });
 
             value: me.value
         });
 
-        Ext.applyIf(me.renderSelectors, {
-            endEl: '.' + Ext.baseCSSPrefix + 'slider-end',
-            innerEl: '.' + Ext.baseCSSPrefix + 'slider-inner',
-            focusEl: '.' + Ext.baseCSSPrefix + 'slider-focus'
-        });
+        me.addChildEls('endEl', 'innerEl', 'focusEl');
 
         me.callParent(arguments);
 
 
         me.callParent(arguments);
 
@@ -326,7 +348,7 @@ Ext.define('Ext.slider.Multi', {
 
     },
 
 
     },
 
-<span id='Ext-slider.Multi-method-onChange'>    /**
+<span id='Ext-slider-Multi-method-onChange'>    /**
 </span>     * Utility method to set the value of the field when the slider changes.
      * @param {Object} slider The slider object.
      * @param {Object} v The new value.
 </span>     * Utility method to set the value of the field when the slider changes.
      * @param {Object} slider The slider object.
      * @param {Object} v The new value.
@@ -336,13 +358,13 @@ Ext.define('Ext.slider.Multi', {
         this.setValue(v, undefined, true);
     },
 
         this.setValue(v, undefined, true);
     },
 
-<span id='Ext-slider.Multi-method-initEvents'>    /**
+<span id='Ext-slider-Multi-method-initEvents'>    /**
 </span>     * @private
      * Adds keyboard and mouse listeners on this.el. Ignores click events on the internal focus element.
      */
     initEvents : function() {
         var me = this;
 </span>     * @private
      * Adds keyboard and mouse listeners on this.el. Ignores click events on the internal focus element.
      */
     initEvents : function() {
         var me = this;
-        
+
         me.mon(me.el, {
             scope    : me,
             mousedown: me.onMouseDown,
         me.mon(me.el, {
             scope    : me,
             mousedown: me.onMouseDown,
@@ -353,7 +375,7 @@ Ext.define('Ext.slider.Multi', {
         me.focusEl.swallowEvent(&quot;click&quot;, true);
     },
 
         me.focusEl.swallowEvent(&quot;click&quot;, true);
     },
 
-<span id='Ext-slider.Multi-method-onMouseDown'>    /**
+<span id='Ext-slider-Multi-method-onMouseDown'>    /**
 </span>     * @private
      * Mousedown handler for the slider. If the clickToChange is enabled and the click was not on the draggable 'thumb',
      * this calculates the new value of the slider and tells the implementation (Horizontal or Vertical) to move the thumb
 </span>     * @private
      * Mousedown handler for the slider. If the clickToChange is enabled and the click was not on the draggable 'thumb',
      * this calculates the new value of the slider and tells the implementation (Horizontal or Vertical) to move the thumb
@@ -366,7 +388,7 @@ Ext.define('Ext.slider.Multi', {
             thumbs = me.thumbs,
             len = thumbs.length,
             local;
             thumbs = me.thumbs,
             len = thumbs.length,
             local;
-            
+
         if (me.disabled) {
             return;
         }
         if (me.disabled) {
             return;
         }
@@ -383,7 +405,7 @@ Ext.define('Ext.slider.Multi', {
         me.focus();
     },
 
         me.focus();
     },
 
-<span id='Ext-slider.Multi-method-onClickChange'>    /**
+<span id='Ext-slider-Multi-method-onClickChange'>    /**
 </span>     * @private
      * Moves the thumb to the indicated position. Note that a Vertical implementation is provided in Ext.slider.Multi.Vertical.
      * Only changes the value if the click was within this.clickRange.
 </span>     * @private
      * Moves the thumb to the indicated position. Note that a Vertical implementation is provided in Ext.slider.Multi.Vertical.
      * Only changes the value if the click was within this.clickRange.
@@ -392,7 +414,7 @@ Ext.define('Ext.slider.Multi', {
     onClickChange : function(local) {
         var me = this,
             thumb, index;
     onClickChange : function(local) {
         var me = this,
             thumb, index;
-            
+
         if (local.top &gt; me.clickRange[0] &amp;&amp; local.top &lt; me.clickRange[1]) {
             //find the nearest thumb to the click event
             thumb = me.getNearest(local, 'left');
         if (local.top &gt; me.clickRange[0] &amp;&amp; local.top &lt; me.clickRange[1]) {
             //find the nearest thumb to the click event
             thumb = me.getNearest(local, 'left');
@@ -403,7 +425,7 @@ Ext.define('Ext.slider.Multi', {
         }
     },
 
         }
     },
 
-<span id='Ext-slider.Multi-method-getNearest'>    /**
+<span id='Ext-slider-Multi-method-getNearest'>    /**
 </span>     * @private
      * Returns the nearest thumb to a click event, along with its distance
      * @param {Object} local Object containing top and left values from a click event
 </span>     * @private
      * Returns the nearest thumb to a click event, along with its distance
      * @param {Object} local Object containing top and left values from a click event
@@ -438,7 +460,7 @@ Ext.define('Ext.slider.Multi', {
         return nearest;
     },
 
         return nearest;
     },
 
-<span id='Ext-slider.Multi-method-onKeyDown'>    /**
+<span id='Ext-slider-Multi-method-onKeyDown'>    /**
 </span>     * @private
      * Handler for any keypresses captured by the slider. If the key is UP or RIGHT, the thumb is moved along to the right
      * by this.keyIncrement. If DOWN or LEFT it is moved left. Pressing CTRL moves the slider to the end in either direction
 </span>     * @private
      * Handler for any keypresses captured by the slider. If the key is UP or RIGHT, the thumb is moved along to the right
      * by this.keyIncrement. If DOWN or LEFT it is moved left. Pressing CTRL moves the slider to the end in either direction
@@ -453,13 +475,13 @@ Ext.define('Ext.slider.Multi', {
         var me = this,
             k,
             val;
         var me = this,
             k,
             val;
-        
+
         if(me.disabled || me.thumbs.length !== 1) {
             e.preventDefault();
             return;
         }
         k = e.getKey();
         if(me.disabled || me.thumbs.length !== 1) {
             e.preventDefault();
             return;
         }
         k = e.getKey();
-        
+
         switch(k) {
             case e.UP:
             case e.RIGHT:
         switch(k) {
             case e.UP:
             case e.RIGHT:
@@ -478,33 +500,6 @@ Ext.define('Ext.slider.Multi', {
         }
     },
 
         }
     },
 
-<span id='Ext-slider.Multi-method-doSnap'>    /**
-</span>     * @private
-     * If using snapping, this takes a desired new value and returns the closest snapped
-     * value to it
-     * @param {Number} value The unsnapped value
-     * @return {Number} The value of the nearest snap target
-     */
-    doSnap : function(value) {
-        var newValue = value,
-            inc = this.increment,
-            m;
-            
-        if (!(inc &amp;&amp; value)) {
-            return value;
-        }
-        m = value % inc;
-        if (m !== 0) {
-            newValue -= m;
-            if (m * 2 &gt;= inc) {
-                newValue += inc;
-            } else if (m * 2 &lt; -inc) {
-                newValue -= inc;
-            }
-        }
-        return Ext.Number.constrain(newValue, this.minValue,  this.maxValue);
-    },
-
     // private
     afterRender : function() {
         var me = this,
     // private
     afterRender : function() {
         var me = this,
@@ -513,7 +508,7 @@ Ext.define('Ext.slider.Multi', {
             len = thumbs.length,
             thumb,
             v;
             len = thumbs.length,
             thumb,
             v;
-            
+
         me.callParent(arguments);
 
         for (; i &lt; len; i++) {
         me.callParent(arguments);
 
         for (; i &lt; len; i++) {
@@ -531,7 +526,7 @@ Ext.define('Ext.slider.Multi', {
         }
     },
 
         }
     },
 
-<span id='Ext-slider.Multi-method-getRatio'>    /**
+<span id='Ext-slider-Multi-method-getRatio'>    /**
 </span>     * @private
      * Returns the ratio of pixels to mapped values. e.g. if the slider is 200px wide and maxValue - minValue is 100,
      * the ratio is 2
 </span>     * @private
      * Returns the ratio of pixels to mapped values. e.g. if the slider is 200px wide and maxValue - minValue is 100,
      * the ratio is 2
@@ -543,7 +538,7 @@ Ext.define('Ext.slider.Multi', {
         return v === 0 ? w : (w/v);
     },
 
         return v === 0 ? w : (w/v);
     },
 
-<span id='Ext-slider.Multi-method-normalizeValue'>    /**
+<span id='Ext-slider-Multi-method-normalizeValue'>    /**
 </span>     * @private
      * Returns a snapped, constrained value when given a desired value
      * @param {Number} value Raw number value
 </span>     * @private
      * Returns a snapped, constrained value when given a desired value
      * @param {Number} value Raw number value
@@ -551,16 +546,16 @@ Ext.define('Ext.slider.Multi', {
      */
     normalizeValue : function(v) {
         var me = this;
      */
     normalizeValue : function(v) {
         var me = this;
-        
-        v = me.doSnap(v);
+
+        v = Ext.Number.snap(v, this.increment, this.minValue, this.maxValue);
         v = Ext.util.Format.round(v, me.decimalPrecision);
         v = Ext.Number.constrain(v, me.minValue, me.maxValue);
         return v;
     },
 
         v = Ext.util.Format.round(v, me.decimalPrecision);
         v = Ext.Number.constrain(v, me.minValue, me.maxValue);
         return v;
     },
 
-<span id='Ext-slider.Multi-method-setMinValue'>    /**
-</span>     * Sets the minimum value for the slider instance. If the current value is less than the
-     * minimum value, the current value will be changed.
+<span id='Ext-slider-Multi-method-setMinValue'>    /**
+</span>     * Sets the minimum value for the slider instance. If the current value is less than the minimum value, the current
+     * value will be changed.
      * @param {Number} val The new minimum value
      */
     setMinValue : function(val) {
      * @param {Number} val The new minimum value
      */
     setMinValue : function(val) {
@@ -569,9 +564,11 @@ Ext.define('Ext.slider.Multi', {
             thumbs = me.thumbs,
             len = thumbs.length,
             t;
             thumbs = me.thumbs,
             len = thumbs.length,
             t;
-            
+
         me.minValue = val;
         me.minValue = val;
-        me.inputEl.dom.setAttribute('aria-valuemin', val);
+        if (me.rendered) {
+            me.inputEl.dom.setAttribute('aria-valuemin', val);
+        }
 
         for (; i &lt; len; ++i) {
             t = thumbs[i];
 
         for (; i &lt; len; ++i) {
             t = thumbs[i];
@@ -580,9 +577,9 @@ Ext.define('Ext.slider.Multi', {
         me.syncThumbs();
     },
 
         me.syncThumbs();
     },
 
-<span id='Ext-slider.Multi-method-setMaxValue'>    /**
-</span>     * Sets the maximum value for the slider instance. If the current value is more than the
-     * maximum value, the current value will be changed.
+<span id='Ext-slider-Multi-method-setMaxValue'>    /**
+</span>     * Sets the maximum value for the slider instance. If the current value is more than the maximum value, the current
+     * value will be changed.
      * @param {Number} val The new maximum value
      */
     setMaxValue : function(val) {
      * @param {Number} val The new maximum value
      */
     setMaxValue : function(val) {
@@ -591,9 +588,11 @@ Ext.define('Ext.slider.Multi', {
             thumbs = me.thumbs,
             len = thumbs.length,
             t;
             thumbs = me.thumbs,
             len = thumbs.length,
             t;
-            
+
         me.maxValue = val;
         me.maxValue = val;
-        me.inputEl.dom.setAttribute('aria-valuemax', val);
+        if (me.rendered) {
+            me.inputEl.dom.setAttribute('aria-valuemax', val);
+        }
 
         for (; i &lt; len; ++i) {
             t = thumbs[i];
 
         for (; i &lt; len; ++i) {
             t = thumbs[i];
@@ -602,12 +601,12 @@ Ext.define('Ext.slider.Multi', {
         me.syncThumbs();
     },
 
         me.syncThumbs();
     },
 
-<span id='Ext-slider.Multi-method-setValue'>    /**
-</span>     * Programmatically sets the value of the Slider. Ensures that the value is constrained within
-     * the minValue and maxValue.
+<span id='Ext-slider-Multi-method-setValue'>    /**
+</span>     * Programmatically sets the value of the Slider. Ensures that the value is constrained within the minValue and
+     * maxValue.
      * @param {Number} index Index of the thumb to move
      * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue)
      * @param {Number} index Index of the thumb to move
      * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue)
-     * @param {Boolean} animate Turn on or off animation, defaults to true
+     * @param {Boolean} [animate=true] Turn on or off animation
      */
     setValue : function(index, value, animate, changeComplete) {
         var me = this,
      */
     setValue : function(index, value, animate, changeComplete) {
         var me = this,
@@ -636,7 +635,7 @@ Ext.define('Ext.slider.Multi', {
         }
     },
 
         }
     },
 
-<span id='Ext-slider.Multi-method-translateValue'>    /**
+<span id='Ext-slider-Multi-method-translateValue'>    /**
 </span>     * @private
      */
     translateValue : function(v) {
 </span>     * @private
      */
     translateValue : function(v) {
@@ -644,7 +643,7 @@ Ext.define('Ext.slider.Multi', {
         return (v * ratio) - (this.minValue * ratio) - this.halfThumb;
     },
 
         return (v * ratio) - (this.minValue * ratio) - this.halfThumb;
     },
 
-<span id='Ext-slider.Multi-method-reverseValue'>    /**
+<span id='Ext-slider-Multi-method-reverseValue'>    /**
 </span>     * @private
      * Given a pixel location along the slider, returns the mapped slider value for that pixel.
      * E.g. if we have a slider 200px wide with minValue = 100 and maxValue = 500, reverseValue(50)
 </span>     * @private
      * Given a pixel location along the slider, returns the mapped slider value for that pixel.
      * E.g. if we have a slider 200px wide with minValue = 100 and maxValue = 500, reverseValue(50)
@@ -671,7 +670,7 @@ Ext.define('Ext.slider.Multi', {
             thumb,
             el,
             xy;
             thumb,
             el,
             xy;
-            
+
         me.callParent();
 
         for (; i &lt; len; i++) {
         me.callParent();
 
         for (; i &lt; len; i++) {
@@ -705,7 +704,7 @@ Ext.define('Ext.slider.Multi', {
             len = thumbs.length,
             thumb,
             el;
             len = thumbs.length,
             thumb,
             el;
-            
+
         this.callParent();
 
         for (; i &lt; len; i++) {
         this.callParent();
 
         for (; i &lt; len; i++) {
@@ -727,11 +726,10 @@ Ext.define('Ext.slider.Multi', {
         }
     },
 
         }
     },
 
-<span id='Ext-slider.Multi-method-syncThumbs'>    /**
-</span>     * Synchronizes thumbs position to the proper proportion of the total component width based
-     * on the current slider {@link #value}.  This will be called automatically when the Slider
-     * is resized by a layout, but if it is rendered auto width, this method can be called from
-     * another resize handler to sync the Slider if necessary.
+<span id='Ext-slider-Multi-method-syncThumbs'>    /**
+</span>     * Synchronizes thumbs position to the proper proportion of the total component width based on the current slider
+     * {@link #value}. This will be called automatically when the Slider is resized by a layout, but if it is rendered
+     * auto width, this method can be called from another resize handler to sync the Slider if necessary.
      */
     syncThumbs : function() {
         if (this.rendered) {
      */
     syncThumbs : function() {
         if (this.rendered) {
@@ -745,19 +743,19 @@ Ext.define('Ext.slider.Multi', {
         }
     },
 
         }
     },
 
-<span id='Ext-slider.Multi-method-getValue'>    /**
+<span id='Ext-slider-Multi-method-getValue'>    /**
 </span>     * Returns the current value of the slider
      * @param {Number} index The index of the thumb to return a value for
 </span>     * Returns the current value of the slider
      * @param {Number} index The index of the thumb to return a value for
-     * @return {Number/Array} The current value of the slider at the given index, or an array of
-     * all thumb values if no index is given.
+     * @return {Number/Number[]} The current value of the slider at the given index, or an array of all thumb values if
+     * no index is given.
      */
     getValue : function(index) {
         return Ext.isNumber(index) ? this.thumbs[index].value : this.getValues();
     },
 
      */
     getValue : function(index) {
         return Ext.isNumber(index) ? this.thumbs[index].value : this.getValues();
     },
 
-<span id='Ext-slider.Multi-method-getValues'>    /**
+<span id='Ext-slider-Multi-method-getValues'>    /**
 </span>     * Returns an array of values - one for the location of each thumb
 </span>     * Returns an array of values - one for the location of each thumb
-     * @return {Array} The set of thumb values
+     * @return {Number[]} The set of thumb values
      */
     getValues: function() {
         var values = [],
      */
     getValues: function() {
         var values = [],
@@ -791,8 +789,8 @@ Ext.define('Ext.slider.Multi', {
     // private
     beforeDestroy : function() {
         var me = this;
     // private
     beforeDestroy : function() {
         var me = this;
-        
-        Ext.destroyMembers(me.innerEl, me.endEl, me.focusEl);
+
+        Ext.destroy(me.innerEl, me.endEl, me.focusEl);
         Ext.each(me.thumbs, function(thumb) {
             Ext.destroy(thumb);
         }, me);
         Ext.each(me.thumbs, function(thumb) {
             Ext.destroy(thumb);
         }, me);
@@ -826,4 +824,6 @@ Ext.define('Ext.slider.Multi', {
         }
     }
 });
         }
     }
 });
-</pre></pre></body></html>
\ No newline at end of file
+</pre>
+</body>
+</html>
Mirror of ExtJS by Sencha Inc. <http://www.sencha.com/>.