Upgrade to ExtJS 4.0.1 - Released 05/18/2011
[extjs.git] / docs / source / Multi.html
index 8ebcbe8..b711020 100644 (file)
@@ -1,4 +1,21 @@
-<!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'>/**
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <title>The source code</title>
+  <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../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> * @class Ext.slider.Multi
  * @extends Ext.form.field.Base
  * &lt;p&gt;Slider which supports vertical or horizontal orientation, keyboard adjustments, configurable snapping, axis
@@ -49,47 +66,47 @@ Ext.define('Ext.slider.Multi', {
         }
     ],
 
-<span id='Ext-slider.Multi-cfg-value'>    /**
+<span id='Ext-slider-Multi-cfg-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.
      */
 
-<span id='Ext-slider.Multi-cfg-values'>    /**
+<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-vertical'>    /**
+<span id='Ext-slider-Multi-cfg-vertical'>    /**
 </span>     * @cfg {Boolean} vertical Orient the Slider vertically rather than horizontally, defaults to false.
      */
     vertical: false,
-<span id='Ext-slider.Multi-cfg-minValue'>    /**
+<span id='Ext-slider-Multi-cfg-minValue'>    /**
 </span>     * @cfg {Number} minValue The minimum value for the Slider. Defaults to 0.
      */
     minValue: 0,
-<span id='Ext-slider.Multi-cfg-maxValue'>    /**
+<span id='Ext-slider-Multi-cfg-maxValue'>    /**
 </span>     * @cfg {Number} maxValue The maximum value for the Slider. Defaults to 100.
      */
     maxValue: 100,
-<span id='Ext-slider.Multi-cfg-decimalPrecision'>    /**
+<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;
      */
     decimalPrecision: 0,
-<span id='Ext-slider.Multi-cfg-keyIncrement'>    /**
+<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.
      */
     keyIncrement: 1,
-<span id='Ext-slider.Multi-cfg-increment'>    /**
+<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,
 
-<span id='Ext-slider.Multi-property-clickRange'>    /**
+<span id='Ext-slider-Multi-property-clickRange'>    /**
 </span>     * @private
      * @property clickRange
      * @type Array
@@ -99,35 +116,35 @@ Ext.define('Ext.slider.Multi', {
      */
     clickRange: [5,15],
 
-<span id='Ext-slider.Multi-cfg-clickToChange'>    /**
+<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
      */
     clickToChange : true,
-<span id='Ext-slider.Multi-cfg-animate'>    /**
+<span id='Ext-slider-Multi-cfg-animate'>    /**
 </span>     * @cfg {Boolean} animate Turn on or off animation. Defaults to true
      */
     animate: true,
 
-<span id='Ext-slider.Multi-property-dragging'>    /**
+<span id='Ext-slider-Multi-property-dragging'>    /**
 </span>     * True while the thumb is in a drag operation
      * @type Boolean
      */
     dragging: false,
 
-<span id='Ext-slider.Multi-cfg-constrainThumbs'>    /**
+<span id='Ext-slider-Multi-cfg-constrainThumbs'>    /**
 </span>     * @cfg {Boolean} constrainThumbs True to disallow thumbs from overlapping one another. Defaults to true
      */
     constrainThumbs: true,
 
     componentLayout: 'sliderfield',
 
-<span id='Ext-slider.Multi-cfg-useTips'>    /**
+<span id='Ext-slider-Multi-cfg-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;.
      */
     useTips : true,
 
-<span id='Ext-slider.Multi-cfg-tipText'>    /**
+<span id='Ext-slider-Multi-cfg-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.
@@ -160,7 +177,7 @@ Ext.define('Ext.slider.Multi', {
             tipPlug,
             hasTip;
         
-<span id='Ext-slider.Multi-property-thumbs'>        /**
+<span id='Ext-slider-Multi-property-thumbs'>        /**
 </span>         * @property thumbs
          * @type Array
          * Array containing references to each thumb
@@ -170,7 +187,7 @@ Ext.define('Ext.slider.Multi', {
         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
              * 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.
@@ -180,7 +197,7 @@ Ext.define('Ext.slider.Multi', {
              */
             '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
@@ -189,7 +206,7 @@ Ext.define('Ext.slider.Multi', {
              */
             '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
@@ -198,7 +215,7 @@ Ext.define('Ext.slider.Multi', {
              */
             '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
@@ -206,7 +223,7 @@ Ext.define('Ext.slider.Multi', {
              */
             '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
@@ -214,7 +231,7 @@ Ext.define('Ext.slider.Multi', {
              */
             '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
@@ -245,7 +262,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
@@ -268,7 +285,7 @@ Ext.define('Ext.slider.Multi', {
         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
@@ -326,7 +343,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.
@@ -336,7 +353,7 @@ Ext.define('Ext.slider.Multi', {
         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.
      */
@@ -353,7 +370,7 @@ Ext.define('Ext.slider.Multi', {
         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
@@ -383,7 +400,7 @@ Ext.define('Ext.slider.Multi', {
         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.
@@ -403,7 +420,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
@@ -438,7 +455,7 @@ Ext.define('Ext.slider.Multi', {
         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
@@ -478,7 +495,7 @@ Ext.define('Ext.slider.Multi', {
         }
     },
 
-<span id='Ext-slider.Multi-method-doSnap'>    /**
+<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
@@ -531,7 +548,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
@@ -543,7 +560,7 @@ Ext.define('Ext.slider.Multi', {
         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
@@ -558,7 +575,7 @@ Ext.define('Ext.slider.Multi', {
         return v;
     },
 
-<span id='Ext-slider.Multi-method-setMinValue'>    /**
+<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
@@ -580,7 +597,7 @@ Ext.define('Ext.slider.Multi', {
         me.syncThumbs();
     },
 
-<span id='Ext-slider.Multi-method-setMaxValue'>    /**
+<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
@@ -602,7 +619,7 @@ Ext.define('Ext.slider.Multi', {
         me.syncThumbs();
     },
 
-<span id='Ext-slider.Multi-method-setValue'>    /**
+<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
@@ -636,7 +653,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) {
@@ -644,7 +661,7 @@ Ext.define('Ext.slider.Multi', {
         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)
@@ -727,7 +744,7 @@ Ext.define('Ext.slider.Multi', {
         }
     },
 
-<span id='Ext-slider.Multi-method-syncThumbs'>    /**
+<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
@@ -745,7 +762,7 @@ 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
      * @return {Number/Array} The current value of the slider at the given index, or an array of
@@ -755,7 +772,7 @@ Ext.define('Ext.slider.Multi', {
         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
      * @return {Array} The set of thumb values
      */
@@ -826,4 +843,6 @@ Ext.define('Ext.slider.Multi', {
         }
     }
 });
-</pre></pre></body></html>
\ No newline at end of file
+</pre>
+</body>
+</html>