[extjs.git] / extjs / classic / classic / src / slider / Multi.js

/**\r
 * Slider which supports vertical or horizontal orientation, keyboard adjustments, configurable snapping, axis clicking\r
 * and animation. Can be added as an item to any container.\r
 *\r
 * Sliders can be created with more than one thumb handle by passing an array of values instead of a single one:\r
 *\r
 *     @example\r
 *     Ext.create('Ext.slider.Multi', {\r
 *         width: 200,\r
 *         values: [25, 50, 75],\r
 *         increment: 5,\r
 *         minValue: 0,\r
 *         maxValue: 100,\r
 *\r
 *         // this defaults to true, setting to false allows the thumbs to pass each other\r
 *         constrainThumbs: false,\r
 *         renderTo: Ext.getBody()\r
 *     });\r
 */\r
Ext.define('Ext.slider.Multi', {\r
    extend: 'Ext.form.field.Base',\r
    alias: 'widget.multislider',\r
    alternateClassName: 'Ext.slider.MultiSlider',\r
\r
    requires: [\r
        'Ext.slider.Thumb',\r
        'Ext.slider.Tip',\r
        'Ext.Number',\r
        'Ext.util.Format',\r
        'Ext.Template'\r
    ],\r
    \r
    /**\r
     * @cfg {Number} value\r
     * A value with which to initialize the slider. Setting this will only result in the creation\r
     * of a single slider thumb; if you want multiple thumbs then use the {@link #values} config instead.\r
     *\r
     * Defaults to #minValue.\r
     */\r
\r
    /**\r
     * @cfg {Number[]} values\r
     * Array of Number values with which to initalize the slider. A separate slider thumb will be created for each value\r
     * in this array. This will take precedence over the single {@link #value} config.\r
     */\r
\r
    /**\r
     * @cfg {Boolean} vertical\r
     * Orient the Slider vertically rather than horizontally.\r
     */\r
    vertical: false,\r
\r
    /**\r
     * @cfg {Number} minValue\r
     * The minimum value for the Slider.\r
     */\r
    minValue: 0,\r
\r
    /**\r
     * @cfg {Number} maxValue\r
     * The maximum value for the Slider.\r
     */\r
    maxValue: 100,\r
\r
    /**\r
     * @cfg {Number/Boolean} decimalPrecision The number of decimal places to which to round the Slider's value.\r
     *\r
     * To disable rounding, configure as **false**.\r
     */\r
    decimalPrecision: 0,\r
\r
    /**\r
     * @cfg {Number} keyIncrement\r
     * How many units to change the Slider when adjusting with keyboard navigation. If the increment\r
     * config is larger, it will be used instead.\r
     */\r
    keyIncrement: 1,\r
    \r
    /**\r
     * @cfg {Number} [pageSize=10]\r
     * How many units to change the Slider when using PageUp and PageDown keys.\r
     */\r
    pageSize: 10,\r
\r
    /**\r
     * @cfg {Number} increment\r
     * How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'.\r
     */\r
    increment: 0,\r
\r
    /**\r
     * @cfg {Boolean} [zeroBasedSnapping=false]\r
     * Set to `true` to calculate snap points based on {@link #increment}s from zero as opposed to\r
     * from this Slider's {@link #minValue}.\r
     *\r
     * By Default, valid snap points are calculated starting {@link #increment}s from the {@link #minValue}\r
     */\r
\r
    /**\r
     * @private\r
     * @property {Number[]} clickRange\r
     * 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],\r
     * 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'\r
     * 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\r
     */\r
    clickRange: [5,15],\r
\r
    /**\r
     * @cfg {Boolean} clickToChange\r
     * Determines whether or not clicking on the Slider axis will change the slider.\r
     */\r
    clickToChange : true,\r
\r
    /**\r
     * @cfg {Object/Boolean} animate\r
     * Turn on or off animation. May be an animation configuration object:\r
     *\r
     *     animate: {\r
     *         duration: 3000,\r
     *         easing: 'easeIn'\r
     *     }\r
     */\r
    animate: true,\r
\r
    /**\r
     * @property {Boolean} dragging\r
     * True while the thumb is in a drag operation\r
     */\r
    dragging: false,\r
\r
    /**\r
     * @cfg {Boolean} constrainThumbs\r
     * True to disallow thumbs from overlapping one another.\r
     */\r
    constrainThumbs: true,\r
\r
    /**\r
     * @cfg {Object/Boolean} useTips\r
     * True to use an {@link Ext.slider.Tip} to display tips for the value. This option may also\r
     * provide a configuration object for an {@link Ext.slider.Tip}.\r
     */\r
    useTips : true,\r
\r
    /**\r
     * @cfg {Function} [tipText=undefined]\r
     * A function used to display custom text for the slider tip.\r
     *\r
     * Defaults to null, which will use the default on the plugin.\r
     *\r
     * @cfg {Ext.slider.Thumb} tipText.thumb The Thumb that the Tip is attached to\r
     * @cfg {String} tipText.return The text to display in the tip\r
     */\r
    tipText : null,\r
    \r
    /**\r
     * @inheritdoc\r
     */\r
    defaultBindProperty: 'values',\r
\r
    /**\r
     * @event beforechange\r
     * Fires before the slider value is changed. By returning false from an event handler, you can cancel the\r
     * event and prevent the slider from changing.\r
     * @param {Ext.slider.Multi} slider The slider\r
     * @param {Number} newValue The new value which the slider is being changed to.\r
     * @param {Number} oldValue The old value which the slider was previously.\r
     */\r
\r
    /**\r
     * @event change\r
     * Fires when the slider value is changed.\r
     * @param {Ext.slider.Multi} slider The slider\r
     * @param {Number} newValue The new value which the slider has been changed to.\r
     * @param {Ext.slider.Thumb} thumb The thumb that was changed\r
     */\r
\r
    /**\r
     * @event changecomplete\r
     * Fires when the slider value is changed by the user and any drag operations have completed.\r
     * @param {Ext.slider.Multi} slider The slider\r
     * @param {Number} newValue The new value which the slider has been changed to.\r
     * @param {Ext.slider.Thumb} thumb The thumb that was changed\r
     */\r
\r
    /**\r
     * @event dragstart\r
     * Fires after a drag operation has started.\r
     * @param {Ext.slider.Multi} slider The slider\r
     * @param {Ext.event.Event} e The event fired from Ext.dd.DragTracker\r
     */\r
\r
    /**\r
     * @event drag\r
     * Fires continuously during the drag operation while the mouse is moving.\r
     * @param {Ext.slider.Multi} slider The slider\r
     * @param {Ext.event.Event} e The event fired from Ext.dd.DragTracker\r
     */\r
\r
    /**\r
     * @event dragend\r
     * Fires after the drag operation has completed.\r
     * @param {Ext.slider.Multi} slider The slider\r
     * @param {Ext.event.Event} e The event fired from Ext.dd.DragTracker\r
     */\r
\r
    ariaRole: 'slider',\r
\r
    focusable: true,\r
    needArrowKeys: true,\r
    tabIndex: 0,\r
    \r
    focusCls: 'slider-focus',\r
\r
    childEls: [\r
        'endEl', 'innerEl'\r
    ],\r
\r
    // note: {id} here is really {inputId}, but {cmpId} is available\r
    fieldSubTpl: [\r
        '<div id="{id}" data-ref="inputEl" {inputAttrTpl}',\r
            ' class="', Ext.baseCSSPrefix, 'slider {fieldCls} {vertical}',\r
            '{childElCls}"',\r
            '<tpl if="tabIdx != null"> tabindex="{tabIdx}"</tpl>',\r
            '<tpl foreach="inputElAriaAttributes"> {$}="{.}"</tpl>',\r
            '>',\r
            '<div id="{cmpId}-endEl" data-ref="endEl" class="' + Ext.baseCSSPrefix + 'slider-end" role="presentation">',\r
                '<div id="{cmpId}-innerEl" data-ref="innerEl" class="' + Ext.baseCSSPrefix + 'slider-inner" role="presentation">',\r
                    '{%this.renderThumbs(out, values)%}',\r
                '</div>',\r
            '</div>',\r
        '</div>',\r
        {\r
            renderThumbs: function(out, values) {\r
                var me = values.$comp,\r
                    i = 0,\r
                    thumbs = me.thumbs,\r
                    len = thumbs.length,\r
                    thumb,\r
                    thumbConfig;\r
\r
                for (; i < len; i++) {\r
                    thumb = thumbs[i];\r
                    thumbConfig = thumb.getElConfig();\r
                    thumbConfig.id = me.id + '-thumb-' + i;\r
                    Ext.DomHelper.generateMarkup(thumbConfig, out);\r
                }\r
            },\r
            disableFormats: true\r
        }\r
    ],\r
\r
    horizontalProp: 'left',\r
\r
    initValue: function() {\r
        var me = this,\r
            extValueFrom = Ext.valueFrom,\r
            // Fallback for initial values: values config -> value config -> minValue config -> 0\r
            values = extValueFrom(me.values, [extValueFrom(me.value, extValueFrom(me.minValue, 0))]),\r
            i = 0,\r
            len = values.length;\r
\r
        // Store for use in dirty check\r
        me.originalValue = values;\r
\r
        // Add a thumb for each value, enforcing configured constraints\r
        for (; i < len; i++) {\r
            me.addThumb(me.normalizeValue(values[i]));\r
        }\r
    },\r
\r
    initComponent: function() {\r
        var me = this,\r
            tipPlug,\r
            hasTip,\r
            p, pLen, plugins;\r
\r
        /**\r
         * @property {Array} thumbs\r
         * Array containing references to each thumb\r
         */\r
        me.thumbs = [];\r
\r
        me.keyIncrement = Math.max(me.increment, me.keyIncrement);\r
\r
        me.extraFieldBodyCls = Ext.baseCSSPrefix + 'slider-ct-' + (me.vertical ? 'vert' : 'horz');\r
\r
        me.callParent();\r
\r
        // only can use it if it exists.\r
        if (me.useTips) {\r
            if (Ext.isObject(me.useTips)) {\r
                tipPlug = Ext.apply({}, me.useTips);\r
            } else {\r
                tipPlug = me.tipText ? {getText: me.tipText} : {};\r
            }\r
\r
            plugins = me.plugins = me.plugins || [];\r
            pLen    = plugins.length;\r
\r
            for (p = 0; p < pLen; p++) {\r
                if (plugins[p].isSliderTip) {\r
                    hasTip = true;\r
                    break;\r
                }\r
            }\r
\r
            if (!hasTip) {\r
                me.plugins.push(new Ext.slider.Tip(tipPlug));\r
            }\r
        }\r
    },\r
\r
    /**\r
     * Creates a new thumb and adds it to the slider\r
     * @param {Number} [value=0] The initial value to set on the thumb.\r
     * @return {Ext.slider.Thumb} The thumb\r
     */\r
    addThumb: function(value) {\r
        var me = this,\r
            thumb = new Ext.slider.Thumb({\r
                ownerCt     : me,\r
                value       : value,\r
                slider      : me,\r
                index       : me.thumbs.length,\r
                constrain   : me.constrainThumbs,\r
                disabled    : !!me.readOnly\r
            });\r
\r
        me.thumbs.push(thumb);\r
\r
        //render the thumb now if needed\r
        if (me.rendered) {\r
            thumb.render();\r
        }\r
\r
        return thumb;\r
    },\r
\r
    /**\r
     * @private\r
     * Moves the given thumb above all other by increasing its z-index. This is called when as drag\r
     * any thumb, so that the thumb that was just dragged is always at the highest z-index. This is\r
     * required when the thumbs are stacked on top of each other at one of the ends of the slider's\r
     * range, which can result in the user not being able to move any of them.\r
     * @param {Ext.slider.Thumb} topThumb The thumb to move to the top\r
     */\r
    promoteThumb: function(topThumb) {\r
        var thumbs = this.thumbStack || (this.thumbStack = Ext.Array.slice(this.thumbs)),\r
            ln = thumbs.length,\r
            zIndex = 10000, i;\r
\r
        // Move topthumb to position zero\r
        if (thumbs[0] !== topThumb) {\r
            Ext.Array.remove(thumbs, topThumb);\r
            thumbs.unshift(topThumb);\r
        }\r
\r
        // Then shuffle the zIndices\r
        for (i = 0; i < ln; i++) {\r
            thumbs[i].el.setStyle('zIndex', zIndex);\r
            zIndex -= 1000;\r
        }\r
    },\r
\r
    getSubTplData : function(fieldData) {\r
        var me = this,\r
            data, ariaAttr;\r
\r
        data = Ext.apply(me.callParent([fieldData]), {\r
            $comp: me,\r
            vertical: me.vertical ? Ext.baseCSSPrefix + 'slider-vert' : Ext.baseCSSPrefix + 'slider-horz',\r
            minValue: me.minValue,\r
            maxValue: me.maxValue,\r
            value: me.value,\r
            tabIdx: me.tabIndex,\r
            childElCls: ''\r
        });\r
        \r
        ariaAttr = data.inputElAriaAttributes;\r
        \r
        if (ariaAttr) {\r
            ariaAttr['aria-orientation'] = me.vertical ? 'vertical' : 'horizontal';\r
            ariaAttr['aria-valuemin'] = me.minValue;\r
            ariaAttr['aria-valuemax'] = me.maxValue;\r
            ariaAttr['aria-valuenow'] = me.value;\r
        }\r
        \r
        return data;\r
    },\r
\r
    onRender : function() {\r
        var me = this,\r
            thumbs = me.thumbs,\r
            len = thumbs.length,\r
            i = 0,\r
            thumb;\r
\r
        me.callParent(arguments);\r
\r
        for (i = 0; i < len; i++) {\r
            thumb = thumbs[i];\r
            thumb.el = me.el.getById(me.id + '-thumb-' + i);\r
            thumb.onRender();\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * Adds keyboard and mouse listeners on this.el. Ignores click events on the internal focus element.\r
     */\r
    initEvents : function() {\r
        var me = this;\r
        \r
        me.callParent();\r
        \r
        me.mon(me.el, {\r
            scope    : me,\r
            mousedown: me.onMouseDown,\r
            keydown  : me.onKeyDown\r
        });\r
    },\r
\r
    onDragStart: Ext.emptyFn,\r
    onDragEnd: Ext.emptyFn,\r
\r
    /**\r
     * @private\r
     * Given an `[x, y]` position within the slider's track (Points outside the slider's track are coerced to either the minimum or maximum value),\r
     * calculate how many pixels **from the slider origin** (left for horizontal Sliders and bottom for vertical Sliders) that point is.\r
     *\r
     * If the point is outside the range of the Slider's track, the return value is `undefined`\r
     * @param {Number[]} xy The point to calculate the track point for\r
     */\r
    getTrackpoint : function(xy) {\r
        var me = this,\r
            vertical = me.vertical,\r
            sliderTrack = me.innerEl,\r
            trackLength, result,\r
            positionProperty;\r
\r
        if (vertical) {\r
            positionProperty = 'top';\r
            trackLength = sliderTrack.getHeight();\r
        } else {\r
            positionProperty = me.horizontalProp;\r
            trackLength = sliderTrack.getWidth();\r
        }\r
        xy = me.transformTrackPoints(sliderTrack.translatePoints(xy));\r
        result = Ext.Number.constrain(xy[positionProperty], 0, trackLength);\r
        return vertical ? trackLength - result : result;\r
    },\r
\r
    transformTrackPoints: Ext.identityFn,\r
    \r
    // Base field checkChange method will fire 'change' event with signature common to all fields,\r
    // but Slider fires the same event with different signature. Hence we disable checkChange here\r
    // to avoid breakage.\r
    checkChange: Ext.emptyFn,\r
\r
    /**\r
     * @private\r
     * Mousedown handler for the slider. If the clickToChange is enabled and the click was not on the draggable 'thumb',\r
     * this calculates the new value of the slider and tells the implementation (Horizontal or Vertical) to move the thumb\r
     * @param {Ext.event.Event} e The click event\r
     */\r
    onMouseDown : function(e) {\r
        var me = this,\r
            thumbClicked = false,\r
            i = 0,\r
            thumbs = me.thumbs,\r
            len = thumbs.length,\r
            trackPoint;\r
\r
        if (me.disabled) {\r
            return;\r
        }\r
\r
        //see if the click was on any of the thumbs\r
        for (; !thumbClicked && i < len; i++) {\r
            thumbClicked = thumbClicked || e.target === thumbs[i].el.dom;\r
        }\r
\r
        // Focus ourselves before setting the value. This allows other\r
        // fields that have blur handlers (for example, date/number field)\r
        // to take care of themselves first. This is important for\r
        // databinding.\r
        me.focus();\r
\r
        if (me.clickToChange && !thumbClicked) {\r
            trackPoint = me.getTrackpoint(e.getXY());\r
            if (trackPoint !== undefined) {\r
                me.onClickChange(trackPoint);\r
            }\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * Moves the thumb to the indicated position.\r
     * Only changes the value if the click was within this.clickRange.\r
     * @param {Number} trackPoint local pixel offset **from the origin** (left for horizontal and bottom for vertical) along the Slider's axis at which the click event occured.\r
     */\r
    onClickChange : function(trackPoint) {\r
        var me = this,\r
            thumb, index;\r
\r
        // How far along the track *from the origin* was the click.\r
        // If vertical, the origin is the bottom of the slider track.\r
\r
        //find the nearest thumb to the click event\r
        thumb = me.getNearest(trackPoint);\r
        if (!thumb.disabled) {\r
            index = thumb.index;\r
            me.setValue(index, Ext.util.Format.round(me.reversePixelValue(trackPoint), me.decimalPrecision), undefined, true);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * Returns the nearest thumb to a click event, along with its distance\r
     * @param {Number} trackPoint local pixel position along the Slider's axis to find the Thumb for\r
     * @return {Object} The closest thumb object and its distance from the click event\r
     */\r
    getNearest: function(trackPoint) {\r
        var me = this,\r
            clickValue = me.reversePixelValue(trackPoint),\r
            nearestDistance = me.getRange() + 5, //add a small fudge for the end of the slider\r
            nearest = null,\r
            thumbs = me.thumbs,\r
            i = 0,\r
            len = thumbs.length,\r
            thumb,\r
            value,\r
            dist;\r
\r
        for (; i < len; i++) {\r
            thumb = me.thumbs[i];\r
            value = thumb.value;\r
            dist  = Math.abs(value - clickValue);\r
\r
            if (Math.abs(dist) <= nearestDistance) {\r
                // this makes sure that thumbs will stay in order\r
                if (nearest && nearest.value == value && value > clickValue && thumb.index > nearest.index) {\r
                    continue;\r
                }\r
                nearest = thumb;\r
                nearestDistance = dist;\r
            }\r
        }\r
        return nearest;\r
    },\r
\r
    /**\r
     * @private\r
     * Handler for any keypresses captured by the slider. If the key is UP or RIGHT, the thumb is moved along to the right\r
     * by this.keyIncrement. If DOWN or LEFT it is moved left. Pressing CTRL moves the slider to the end in either direction\r
     * @param {Ext.event.Event} e The Event object\r
     */\r
    onKeyDown: function(e) {\r
        var me = this,\r
            ariaDom = me.ariaEl.dom,\r
            k, val;\r
        \r
        k = e.getKey();\r
\r
        /*\r
         * The behaviour for keyboard handling with multiple thumbs is currently undefined.\r
         * There's no real sane default for it, so leave it like this until we come up\r
         * with a better way of doing it.\r
         */\r
        if (me.disabled || me.thumbs.length !== 1) {\r
            // Must not mingle with the Tab key!\r
            if (k !== e.TAB) {\r
                e.preventDefault();\r
            }\r
            \r
            return;\r
        }\r
\r
        switch (k) {\r
            case e.UP:\r
            case e.RIGHT:\r
                val = e.ctrlKey ? me.maxValue : me.getValue(0) + me.keyIncrement;\r
                break;\r
            \r
            case e.DOWN:\r
            case e.LEFT:\r
                val = e.ctrlKey ? me.minValue : me.getValue(0) - me.keyIncrement;\r
                break;\r
            \r
            case e.HOME:\r
                val = me.minValue;\r
                break;\r
            \r
            case e.END:\r
                val = me.maxValue;\r
                break;\r
            \r
            case e.PAGE_UP:\r
                val = me.getValue(0) + me.pageSize;\r
                break;\r
            \r
            case e.PAGE_DOWN:\r
                val = me.getValue(0) - me.pageSize;\r
                break;\r
        }\r
        \r
        if (val !== undefined) {\r
            e.stopEvent();\r
            \r
            val = me.normalizeValue(val);\r
            \r
            me.setValue(0, val, undefined, true);\r
            \r
            if (ariaDom) {\r
                ariaDom.setAttribute('aria-valuenow', val);\r
            }\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * Returns a snapped, constrained value when given a desired value\r
     * @param {Number} value Raw number value\r
     * @return {Number} The raw value rounded to the correct d.p. and constrained within the set max and min values\r
     */\r
    normalizeValue : function(v) {\r
        var me = this,\r
            snapFn = me.zeroBasedSnapping ? 'snap' : 'snapInRange';\r
\r
        v = Ext.Number[snapFn](v, me.increment, me.minValue, me.maxValue);\r
        v = Ext.util.Format.round(v, me.decimalPrecision);\r
        v = Ext.Number.constrain(v, me.minValue, me.maxValue);\r
        return v;\r
    },\r
\r
    /**\r
     * Sets the minimum value for the slider instance. If the current value is less than the minimum value, the current\r
     * value will be changed.\r
     * @param {Number} val The new minimum value\r
     */\r
    setMinValue: function(val) {\r
        var me = this,\r
            thumbs = me.thumbs,\r
            len = thumbs.length,\r
            ariaDom = me.ariaEl.dom,\r
            thumb, i;\r
\r
        me.minValue = val;\r
\r
        for (i = 0; i < len; ++i) {\r
            thumb = thumbs[i];\r
            if (thumb.value < val) {\r
                me.setValue(i, val, false);\r
            }\r
        }\r
        \r
        if (ariaDom) {\r
            ariaDom.setAttribute('aria-valuemin', val);\r
        }\r
        \r
        me.syncThumbs();\r
    },\r
\r
    /**\r
     * Sets the maximum value for the slider instance. If the current value is more than the maximum value, the current\r
     * value will be changed.\r
     * @param {Number} val The new maximum value\r
     */\r
    setMaxValue: function(val) {\r
        var me = this,\r
            thumbs = me.thumbs,\r
            len = thumbs.length,\r
            ariaDom = me.ariaEl.dom,\r
            thumb, i;\r
\r
        me.maxValue = val;\r
\r
        for (i = 0; i < len; ++i) {\r
            thumb = thumbs[i];\r
            if (thumb.value > val) {\r
                me.setValue(i, val, false);\r
            }\r
        }\r
        \r
        if (ariaDom) {\r
            ariaDom.setAttribute('aria-valuemax', val);\r
        }\r
        \r
        me.syncThumbs();\r
    },\r
\r
    /**\r
     * Programmatically sets the value of the Slider. Ensures that the value is constrained within the minValue and\r
     * maxValue.\r
     *\r
     * Setting the second slider's value without animation:\r
     *\r
     *     mySlider.setValue(1, 50, false);\r
     *\r
     * Setting multiple values with animation:\r
     *\r
     *     mySlider.setValue([20, 40, 60], true);\r
     *\r
     * @param {Number/Number[]} index Index of the thumb to move. Alternatively, it can be an array of values to set\r
     * for each thumb in the slider.\r
     * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue)\r
     * @param {Object/Boolean} [animate] `false` to not animate. `true` to use the default animation. This may also be an\r
     * animate configuration object, see {@link #cfg-animate}. If this configuration is omitted, the {@link #cfg-animate} configuration\r
     * will be used.\r
     * @return {Ext.slider.Multi} this\r
     */\r
    setValue : function(index, value, animate, changeComplete) {\r
        var me = this,\r
            thumbs = me.thumbs,\r
            ariaDom = me.ariaEl.dom,\r
            thumb, len, i, values;\r
\r
        if (Ext.isArray(index)) {\r
            values = index;\r
            animate = value;\r
\r
            for (i = 0, len = values.length; i < len; ++i) {\r
                thumb = thumbs[i];\r
                if (thumb) {\r
                    me.setValue(i, values[i], animate);\r
                }\r
            }\r
            return me;\r
        }\r
\r
        thumb = me.thumbs[index];\r
        // ensures value is contstrained and snapped\r
        value = me.normalizeValue(value);\r
\r
        if (value !== thumb.value && me.fireEvent('beforechange', me, value, thumb.value, thumb) !== false) {\r
            thumb.value = value;\r
            if (me.rendered) {\r
                if (Ext.isDefined(animate)) {\r
                    animate = animate === false ? false : animate;\r
                } else {\r
                    animate = me.animate;\r
                }\r
                thumb.move(me.calculateThumbPosition(value), animate);\r
                \r
                // At this moment we can only handle one thumb wrt ARIA\r
                if (index === 0 && ariaDom) {\r
                    ariaDom.setAttribute('aria-valuenow', value);\r
                }\r
\r
                me.fireEvent('change', me, value, thumb);\r
                me.checkDirty();\r
\r
                if (changeComplete) {\r
                    me.fireEvent('changecomplete', me, value, thumb);\r
                }\r
            }\r
        }\r
        return me;\r
    },\r
\r
    /**\r
     * @private\r
     * Given a value within this Slider's range, calculates a Thumb's percentage CSS position to map that value.\r
     */\r
    calculateThumbPosition : function(v) {\r
        var me = this,\r
            minValue = me.minValue,\r
            pos = (v - minValue) / me.getRange() * 100;\r
\r
        if (isNaN(pos)) {\r
            pos = 0;\r
        }\r
\r
        return pos;\r
    },\r
\r
    /**\r
     * @private\r
     * Returns the ratio of pixels to mapped values. e.g. if the slider is 200px wide and maxValue - minValue is 100,\r
     * the ratio is 2\r
     * @return {Number} The ratio of pixels to mapped values\r
     */\r
    getRatio : function() {\r
        var me = this,\r
            innerEl = me.innerEl,\r
            trackLength = me.vertical ? innerEl.getHeight() : innerEl.getWidth(),\r
            valueRange = me.getRange();\r
\r
        return valueRange === 0 ? trackLength : (trackLength / valueRange);\r
    },\r
\r
    getRange: function(){\r
        return this.maxValue - this.minValue;\r
    },\r
\r
    /**\r
     * @private\r
     * Given a pixel location along the slider, returns the mapped slider value for that pixel.\r
     * E.g. if we have a slider 200px wide with minValue = 100 and maxValue = 500, reversePixelValue(50)\r
     * returns 200\r
     * @param {Number} pos The position along the slider to return a mapped value for\r
     * @return {Number} The mapped value for the given position\r
     */\r
    reversePixelValue : function(pos) {\r
        return this.minValue + (pos / this.getRatio());\r
    },\r
\r
    /**\r
     * @private\r
     * Given a Thumb's percentage position along the slider, returns the mapped slider value for that pixel.\r
     * E.g. if we have a slider 200px wide with minValue = 100 and maxValue = 500, reversePercentageValue(25)\r
     * returns 200\r
     * @param {Number} pos The percentage along the slider track to return a mapped value for\r
     * @return {Number} The mapped value for the given position\r
     */\r
    reversePercentageValue : function(pos) {\r
        return this.minValue + this.getRange() * (pos / 100);\r
    },\r
\r
    onDisable: function() {\r
        var me = this,\r
            i = 0,\r
            thumbs = me.thumbs,\r
            len = thumbs.length,\r
            thumb,\r
            el,\r
            xy;\r
\r
        me.callParent();\r
\r
        for (; i < len; i++) {\r
            thumb = thumbs[i];\r
            el = thumb.el;\r
\r
            thumb.disable();\r
\r
            if(Ext.isIE) {\r
                //IE breaks when using overflow visible and opacity other than 1.\r
                //Create a place holder for the thumb and display it.\r
                xy = el.getXY();\r
                el.hide();\r
\r
                me.innerEl.addCls(me.disabledCls).dom.disabled = true;\r
\r
                if (!me.thumbHolder) {\r
                    me.thumbHolder = me.endEl.createChild({\r
                        role: 'presentation',\r
                        cls: Ext.baseCSSPrefix + 'slider-thumb ' + me.disabledCls\r
                    });\r
                }\r
\r
                me.thumbHolder.show().setXY(xy);\r
            }\r
        }\r
    },\r
\r
    onEnable: function() {\r
        var me = this,\r
            i = 0,\r
            thumbs = me.thumbs,\r
            len = thumbs.length,\r
            thumb,\r
            el;\r
\r
        this.callParent();\r
\r
        for (; i < len; i++) {\r
            thumb = thumbs[i];\r
            el = thumb.el;\r
\r
            thumb.enable();\r
\r
            if (Ext.isIE) {\r
                me.innerEl.removeCls(me.disabledCls).dom.disabled = false;\r
\r
                if (me.thumbHolder) {\r
                    me.thumbHolder.hide();\r
                }\r
\r
                el.show();\r
                me.syncThumbs();\r
            }\r
        }\r
    },\r
\r
    /**\r
     * Synchronizes thumbs position to the proper proportion of the total component width based on the current slider\r
     * {@link #value}. This will be called automatically when the Slider is resized by a layout, but if it is rendered\r
     * auto width, this method can be called from another resize handler to sync the Slider if necessary.\r
     */\r
    syncThumbs : function() {\r
        if (this.rendered) {\r
            var thumbs = this.thumbs,\r
                length = thumbs.length,\r
                i = 0;\r
\r
            for (; i < length; i++) {\r
                thumbs[i].move(this.calculateThumbPosition(thumbs[i].value));\r
            }\r
        }\r
    },\r
\r
    /**\r
     * Returns the current value of the slider\r
     * @param {Number} index The index of the thumb to return a value for\r
     * @return {Number/Number[]} The current value of the slider at the given index, or an array of all thumb values if\r
     * no index is given.\r
     */\r
    getValue : function(index) {\r
        return Ext.isNumber(index) ? this.thumbs[index].value : this.getValues();\r
    },\r
\r
    /**\r
     * Returns an array of values - one for the location of each thumb\r
     * @return {Number[]} The set of thumb values\r
     */\r
    getValues: function() {\r
        var values = [],\r
            i = 0,\r
            thumbs = this.thumbs,\r
            len = thumbs.length;\r
\r
        for (; i < len; i++) {\r
            values.push(thumbs[i].value);\r
        }\r
\r
        return values;\r
    },\r
\r
    getSubmitValue: function() {\r
        var me = this;\r
        return (me.disabled || !me.submitValue) ? null : me.getValue();\r
    },\r
\r
    reset: function() {\r
        var me = this,\r
            arr = [].concat(me.originalValue),\r
            a     = 0,\r
            aLen  = arr.length,\r
            val;\r
\r
        for (; a < aLen; a++) {\r
            val = arr[a];\r
\r
            me.setValue(a, val);\r
        }\r
\r
        me.clearInvalid();\r
        // delete here so we reset back to the original state\r
        delete me.wasValid;\r
    },\r
\r
    setReadOnly: function(readOnly){\r
        var me = this,\r
            thumbs = me.thumbs,\r
            len = thumbs.length,\r
            i = 0;\r
\r
        me.callParent(arguments);\r
        readOnly = me.readOnly;\r
\r
        for (; i < len; ++i) {\r
            if (readOnly) {\r
                thumbs[i].disable();\r
            } else {\r
                thumbs[i].enable();\r
            }\r
\r
        }\r
\r
    },\r
\r
    beforeDestroy: function() {\r
        var me     = this,\r
            thumbs = me.thumbs,\r
            t      = 0,\r
            tLen   = thumbs.length,\r
            thumb;\r
\r
        if (me.rendered) {\r
            for (; t < tLen; t++) {\r
                thumb = thumbs[t];\r
\r
                Ext.destroy(thumb);\r
            }\r
        }\r
\r
        me.callParent();\r
    }\r
});\r