<!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:
|
*
|
* @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',
|
alias: 'widget.multislider',
|
alternateClassName: 'Ext.slider.MultiSlider',
|
|
requires: [
|
'Ext.slider.Thumb',
|
'Ext.slider.Tip',
|
'Ext.Number',
|
'Ext.util.Format',
|
'Ext.Template',
|
'Ext.layout.component.field.Slider'
|
],
|
|
<span id='Ext-slider-Multi-property-childEls'> childEls: [
|
</span> 'endEl', 'innerEl'
|
],
|
|
<span id='Ext-slider-Multi-cfg-fieldSubTpl'> // note: {id} here is really {inputId}, but {cmpId} is available
|
</span> fieldSubTpl: [
|
'<div id="{id}" class="' + Ext.baseCSSPrefix + 'slider {fieldCls} {vertical}',
|
'{childElCls}',
|
'" aria-valuemin="{minValue}" aria-valuemax="{maxValue}" aria-valuenow="{value}" aria-valuetext="{value}">',
|
'<div id="{cmpId}-endEl" class="' + Ext.baseCSSPrefix + 'slider-end" role="presentation">',
|
'<div id="{cmpId}-innerEl" class="' + Ext.baseCSSPrefix + 'slider-inner" role="presentation">',
|
'{%this.renderThumbs(out, values)%}',
|
'</div>',
|
'</div>',
|
'</div>',
|
{
|
renderThumbs: function(out, values) {
|
var me = values.$comp,
|
i = 0,
|
thumbs = me.thumbs,
|
len = thumbs.length,
|
thumb,
|
thumbConfig;
|
|
for (; i < len; i++) {
|
thumb = thumbs[i];
|
thumbConfig = thumb.getElConfig();
|
thumbConfig.id = me.id + '-thumb-' + i;
|
Ext.DomHelper.generateMarkup(thumbConfig, out);
|
}
|
},
|
disableFormats: true
|
}
|
],
|
|
<span id='Ext-slider-Multi-property-horizontalProp'> horizontalProp: 'left',
|
</span>
|
<span id='Ext-slider-Multi-cfg-value'> /**
|
</span> * @cfg {Number} value
|
* A value with which to initialize the slider. 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.
|
*
|
* Defaults to #minValue.
|
*/
|
|
<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.
|
*/
|
vertical: false,
|
|
<span id='Ext-slider-Multi-cfg-minValue'> /**
|
</span> * @cfg {Number} minValue
|
* The minimum value for the Slider.
|
*/
|
minValue: 0,
|
|
<span id='Ext-slider-Multi-cfg-maxValue'> /**
|
</span> * @cfg {Number} maxValue
|
* The maximum value for the Slider.
|
*/
|
maxValue: 100,
|
|
<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,
|
|
<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,
|
|
<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-cfg-zeroBasedSnapping'> /**
|
</span> * @cfg {Boolean} [zeroBasedSnapping=false]
|
* Set to `true` to calculate snap points based on {@link #increment}s from zero as opposed to
|
* from this Slider's {@link #minValue}.
|
*
|
* By Default, valid snap points are calculated starting {@link #increment}s from the {@link #minValue}
|
*/
|
|
<span id='Ext-slider-Multi-property-clickRange'> /**
|
</span> * @private
|
* @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],
|
|
<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,
|
|
<span id='Ext-slider-Multi-cfg-animate'> /**
|
</span> * @cfg {Boolean} animate
|
* Turn on or off animation.
|
*/
|
animate: true,
|
|
<span id='Ext-slider-Multi-property-dragging'> /**
|
</span> * @property {Boolean} dragging
|
* True while the thumb is in a drag operation
|
*/
|
dragging: false,
|
|
<span id='Ext-slider-Multi-cfg-constrainThumbs'> /**
|
</span> * @cfg {Boolean} constrainThumbs
|
* True to disallow thumbs from overlapping one another.
|
*/
|
constrainThumbs: true,
|
|
<span id='Ext-slider-Multi-cfg-componentLayout'> componentLayout: 'sliderfield',
|
</span>
|
<span id='Ext-slider-Multi-cfg-useTips'> /**
|
</span> * @cfg {Object/Boolean} useTips
|
* True to use an {@link Ext.slider.Tip} to display tips for the value. This option may also
|
* provide a configuration object for an {@link Ext.slider.Tip}.
|
*/
|
useTips : true,
|
|
<span id='Ext-slider-Multi-cfg-tipText'> /**
|
</span> * @cfg {Function} [tipText=undefined]
|
* A function used to display custom text for the slider tip.
|
*
|
* Defaults to null, which will use the default on the plugin.
|
*
|
* @cfg {Ext.slider.Thumb} tipText.thumb The Thumb that the Tip is attached to
|
* @cfg {String} tipText.return The text to display in the tip
|
*/
|
tipText : null,
|
|
<span id='Ext-slider-Multi-property-ariaRole'> ariaRole: 'slider',
|
</span>
|
<span id='Ext-slider-Multi-method-initValue'> // private override
|
</span> initValue: function() {
|
var me = this,
|
extValue = Ext.value,
|
// Fallback for initial values: values config -> value config -> minValue config -> 0
|
values = extValue(me.values, [extValue(me.value, extValue(me.minValue, 0))]),
|
i = 0,
|
len = values.length;
|
|
// Store for use in dirty check
|
me.originalValue = values;
|
|
// Add a thumb for each value
|
for (; i < len; i++) {
|
me.addThumb(values[i]);
|
}
|
},
|
|
<span id='Ext-slider-Multi-method-initComponent'> // private override
|
</span> initComponent : function() {
|
var me = this,
|
tipPlug,
|
hasTip,
|
p, pLen, plugins;
|
|
<span id='Ext-slider-Multi-property-thumbs'> /**
|
</span> * @property {Array} thumbs
|
* Array containing references to each thumb
|
*/
|
me.thumbs = [];
|
|
me.keyIncrement = Math.max(me.increment, me.keyIncrement);
|
|
me.addEvents(
|
<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.
|
* @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> * @event change
|
* Fires when the slider value is changed.
|
* @param {Ext.slider.Multi} slider The slider
|
* @param {Number} newValue The new value which the slider has been changed to.
|
* @param {Ext.slider.Thumb} thumb The thumb that was changed
|
*/
|
'change',
|
|
<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
|
* @param {Number} newValue The new value which the slider has been changed to.
|
* @param {Ext.slider.Thumb} thumb The thumb that was changed
|
*/
|
'changecomplete',
|
|
<span id='Ext-slider-Multi-event-dragstart'> /**
|
</span> * @event dragstart
|
* Fires after a drag operation has started.
|
* @param {Ext.slider.Multi} slider The slider
|
* @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
|
*/
|
'dragstart',
|
|
<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
|
* @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
|
*/
|
'drag',
|
|
<span id='Ext-slider-Multi-event-dragend'> /**
|
</span> * @event dragend
|
* Fires after the drag operation has completed.
|
* @param {Ext.slider.Multi} slider The slider
|
* @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
|
*/
|
'dragend'
|
);
|
|
me.callParent();
|
|
// only can use it if it exists.
|
if (me.useTips) {
|
if (Ext.isObject(me.useTips)) {
|
tipPlug = Ext.apply({}, me.useTips);
|
} else {
|
tipPlug = me.tipText ? {getText: me.tipText} : {};
|
}
|
|
plugins = me.plugins = me.plugins || [];
|
pLen = plugins.length;
|
|
for (p = 0; p < pLen; p++) {
|
if (plugins[p].isSliderTip) {
|
hasTip = true;
|
break;
|
}
|
}
|
|
if (!hasTip) {
|
me.plugins.push(new Ext.slider.Tip(tipPlug));
|
}
|
}
|
},
|
|
<span id='Ext-slider-Multi-method-addThumb'> /**
|
</span> * Creates a new thumb and adds it to the slider
|
* @param {Number} [value=0] The initial value to set on the thumb.
|
* @return {Ext.slider.Thumb} The thumb
|
*/
|
addThumb: function(value) {
|
var me = this,
|
thumb = new Ext.slider.Thumb({
|
ownerCt : me,
|
ownerLayout : me.getComponentLayout(),
|
value : value,
|
slider : me,
|
index : me.thumbs.length,
|
constrain : me.constrainThumbs,
|
disabled : !!me.readOnly
|
});
|
|
me.thumbs.push(thumb);
|
|
//render the thumb now if needed
|
if (me.rendered) {
|
thumb.render();
|
}
|
|
return thumb;
|
},
|
|
<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
|
* required when the thumbs are stacked on top of each other at one of the ends of the slider's
|
* range, which can result in the user not being able to move any of them.
|
* @param {Ext.slider.Thumb} topThumb The thumb to move to the top
|
*/
|
promoteThumb: function(topThumb) {
|
var thumbs = this.thumbs,
|
ln = thumbs.length,
|
zIndex, thumb, i;
|
|
for (i = 0; i < ln; i++) {
|
thumb = thumbs[i];
|
|
if (thumb == topThumb) {
|
thumb.bringToFront();
|
} else {
|
thumb.sendToBack();
|
}
|
}
|
},
|
|
<span id='Ext-slider-Multi-method-getSubTplData'> // private override
|
</span> getSubTplData : function() {
|
var me = this;
|
|
return Ext.apply(me.callParent(), {
|
$comp: me,
|
vertical: me.vertical ? Ext.baseCSSPrefix + 'slider-vert' : Ext.baseCSSPrefix + 'slider-horz',
|
minValue: me.minValue,
|
maxValue: me.maxValue,
|
value: me.value,
|
childElCls: ''
|
});
|
},
|
|
<span id='Ext-slider-Multi-method-onRender'> onRender : function() {
|
</span> var me = this,
|
thumbs = me.thumbs,
|
len = thumbs.length,
|
i = 0,
|
thumb;
|
|
me.callParent(arguments);
|
|
for (i = 0; i < len; i++) {
|
thumb = thumbs[i];
|
thumb.el = me.el.getById(me.id + '-thumb-' + i);
|
thumb.onRender();
|
}
|
},
|
|
<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;
|
me.mon(me.el, {
|
scope : me,
|
mousedown: me.onMouseDown,
|
keydown : me.onKeyDown
|
});
|
},
|
|
<span id='Ext-slider-Multi-method-onDragStart'> onDragStart: Ext.emptyFn,
|
</span><span id='Ext-slider-Multi-method-onDragEnd'> onDragEnd: Ext.emptyFn,
|
</span>
|
<span id='Ext-slider-Multi-method-getTrackpoint'> /**
|
</span> * @private
|
* 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),
|
* calculate how many pixels **from the slider origin** (left for horizontal Sliders and bottom for vertical Sliders) that point is.
|
*
|
* If the point is outside the range of the Slider's track, the return value is `undefined`
|
* @param {Number[]} xy The point to calculate the track point for
|
*/
|
getTrackpoint : function(xy) {
|
var me = this,
|
vertical = me.vertical,
|
sliderTrack = me.innerEl,
|
trackLength, result,
|
positionProperty;
|
|
if (vertical) {
|
positionProperty = 'top';
|
trackLength = sliderTrack.getHeight();
|
} else {
|
positionProperty = me.horizontalProp;
|
trackLength = sliderTrack.getWidth();
|
}
|
xy = me.transformTrackPoints(sliderTrack.translatePoints(xy));
|
result = Ext.Number.constrain(xy[positionProperty], 0, trackLength);
|
return vertical ? trackLength - result : result;
|
},
|
|
<span id='Ext-slider-Multi-property-transformTrackPoints'> transformTrackPoints: Ext.identityFn,
|
</span>
|
<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
|
* @param {Ext.EventObject} e The click event
|
*/
|
onMouseDown : function(e) {
|
var me = this,
|
thumbClicked = false,
|
i = 0,
|
thumbs = me.thumbs,
|
len = thumbs.length,
|
trackPoint;
|
|
if (me.disabled) {
|
return;
|
}
|
|
//see if the click was on any of the thumbs
|
for (; i < len; i++) {
|
thumbClicked = thumbClicked || e.target == thumbs[i].el.dom;
|
}
|
|
if (me.clickToChange && !thumbClicked) {
|
trackPoint = me.getTrackpoint(e.getXY());
|
if (trackPoint !== undefined) {
|
me.onClickChange(trackPoint);
|
}
|
}
|
me.focus();
|
},
|
|
<span id='Ext-slider-Multi-method-onClickChange'> /**
|
</span> * @private
|
* Moves the thumb to the indicated position.
|
* Only changes the value if the click was within this.clickRange.
|
* @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.
|
*/
|
onClickChange : function(trackPoint) {
|
var me = this,
|
thumb, index;
|
|
// How far along the track *from the origin* was the click.
|
// If vertical, the origin is the bottom of the slider track.
|
|
//find the nearest thumb to the click event
|
thumb = me.getNearest(trackPoint);
|
if (!thumb.disabled) {
|
index = thumb.index;
|
me.setValue(index, Ext.util.Format.round(me.reversePixelValue(trackPoint), me.decimalPrecision), undefined, true);
|
}
|
},
|
|
<span id='Ext-slider-Multi-method-getNearest'> /**
|
</span> * @private
|
* Returns the nearest thumb to a click event, along with its distance
|
* @param {Number} trackPoint local pixel position along the Slider's axis to find the Thumb for
|
* @return {Object} The closest thumb object and its distance from the click event
|
*/
|
getNearest: function(trackPoint) {
|
var me = this,
|
clickValue = me.reversePixelValue(trackPoint),
|
nearestDistance = me.getRange() + 5, //add a small fudge for the end of the slider
|
nearest = null,
|
thumbs = me.thumbs,
|
i = 0,
|
len = thumbs.length,
|
thumb,
|
value,
|
dist;
|
|
for (; i < len; i++) {
|
thumb = me.thumbs[i];
|
value = thumb.value;
|
dist = Math.abs(value - clickValue);
|
|
if (Math.abs(dist <= nearestDistance)) {
|
nearest = thumb;
|
nearestDistance = dist;
|
}
|
}
|
return nearest;
|
},
|
|
<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
|
* @param {Ext.EventObject} e The Event object
|
*/
|
onKeyDown : function(e) {
|
/*
|
* The behaviour for keyboard handling with multiple thumbs is currently undefined.
|
* There's no real sane default for it, so leave it like this until we come up
|
* with a better way of doing it.
|
*/
|
var me = this,
|
k,
|
val;
|
|
if(me.disabled || me.thumbs.length !== 1) {
|
e.preventDefault();
|
return;
|
}
|
k = e.getKey();
|
|
switch(k) {
|
case e.UP:
|
case e.RIGHT:
|
e.stopEvent();
|
val = e.ctrlKey ? me.maxValue : me.getValue(0) + me.keyIncrement;
|
me.setValue(0, val, undefined, true);
|
break;
|
case e.DOWN:
|
case e.LEFT:
|
e.stopEvent();
|
val = e.ctrlKey ? me.minValue : me.getValue(0) - me.keyIncrement;
|
me.setValue(0, val, undefined, true);
|
break;
|
default:
|
e.preventDefault();
|
}
|
},
|
|
<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
|
* @return {Number} The raw value rounded to the correct d.p. and constrained within the set max and min values
|
*/
|
normalizeValue : function(v) {
|
var me = this,
|
snapFn = me.zeroBasedSnapping ? 'snap' : 'snapInRange';
|
|
v = Ext.Number[snapFn](v, me.increment, me.minValue, me.maxValue);
|
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.
|
* @param {Number} val The new minimum value
|
*/
|
setMinValue : function(val) {
|
var me = this,
|
thumbs = me.thumbs,
|
len = thumbs.length,
|
thumb, i;
|
|
me.minValue = val;
|
if (me.rendered) {
|
me.inputEl.dom.setAttribute('aria-valuemin', val);
|
}
|
|
for (i = 0; i < len; ++i) {
|
thumb = thumbs[i];
|
if (thumb.value < val) {
|
me.setValue(i, val, false);
|
}
|
}
|
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.
|
* @param {Number} val The new maximum value
|
*/
|
setMaxValue : function(val) {
|
var me = this,
|
thumbs = me.thumbs,
|
len = thumbs.length,
|
thumb, i;
|
|
me.maxValue = val;
|
if (me.rendered) {
|
me.inputEl.dom.setAttribute('aria-valuemax', val);
|
}
|
|
for (i = 0; i < len; ++i) {
|
thumb = thumbs[i];
|
if (thumb.value > val) {
|
me.setValue(i, val, false);
|
}
|
}
|
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.
|
*
|
* Setting a single value:
|
* // Set the second slider value, don't animate
|
* mySlider.setValue(1, 50, false);
|
*
|
* Setting multiple values at once
|
* // Set 3 thumb values, animate
|
* mySlider.setValue([20, 40, 60], true);
|
*
|
* @param {Number/Number[]} index Index of the thumb to move. Alternatively, it can be an array of values to set
|
* for each thumb in the slider.
|
* @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue)
|
* @param {Boolean} [animate=true] Turn on or off animation
|
* @return {Ext.slider.Multi} this
|
*/
|
setValue : function(index, value, animate, changeComplete) {
|
var me = this,
|
thumbs = me.thumbs,
|
thumb, len, i, values;
|
|
if (Ext.isArray(index)) {
|
values = index;
|
animate = value;
|
|
for (i = 0, len = values.length; i < len; ++i) {
|
thumb = thumbs[i];
|
if (thumb) {
|
me.setValue(i, values[i], animate);
|
}
|
}
|
return me;
|
}
|
|
thumb = me.thumbs[index];
|
// ensures value is contstrained and snapped
|
value = me.normalizeValue(value);
|
|
if (value !== thumb.value && me.fireEvent('beforechange', me, value, thumb.value, thumb) !== false) {
|
thumb.value = value;
|
if (me.rendered) {
|
// TODO this only handles a single value; need a solution for exposing multiple values to aria.
|
// Perhaps this should go on each thumb element rather than the outer element.
|
me.inputEl.set({
|
'aria-valuenow': value,
|
'aria-valuetext': value
|
});
|
|
thumb.move(me.calculateThumbPosition(value), Ext.isDefined(animate) ? animate !== false : me.animate);
|
|
me.fireEvent('change', me, value, thumb);
|
me.checkDirty();
|
if (changeComplete) {
|
me.fireEvent('changecomplete', me, value, thumb);
|
}
|
}
|
}
|
return me;
|
},
|
|
<span id='Ext-slider-Multi-method-calculateThumbPosition'> /**
|
</span> * @private
|
* Given a value within this Slider's range, calculates a Thumb's percentage CSS position to map that value.
|
*/
|
calculateThumbPosition : function(v) {
|
var me = this,
|
minValue = me.minValue,
|
pos = (v - minValue) / me.getRange() * 100;
|
|
// If the total number of records is <= pageSize then return minValue.
|
if (isNaN(pos)) {
|
pos = minValue;
|
}
|
|
return pos;
|
},
|
|
<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
|
* @return {Number} The ratio of pixels to mapped values
|
*/
|
getRatio : function() {
|
var me = this,
|
innerEl = me.innerEl,
|
trackLength = me.vertical ? innerEl.getHeight() : innerEl.getWidth(),
|
valueRange = me.getRange();
|
|
return valueRange === 0 ? trackLength : (trackLength / valueRange);
|
},
|
|
<span id='Ext-slider-Multi-method-getRange'> getRange: function(){
|
</span> return this.maxValue - this.minValue;
|
},
|
|
<span id='Ext-slider-Multi-method-reversePixelValue'> /**
|
</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, reversePixelValue(50)
|
* returns 200
|
* @param {Number} pos The position along the slider to return a mapped value for
|
* @return {Number} The mapped value for the given position
|
*/
|
reversePixelValue : function(pos) {
|
return this.minValue + (pos / this.getRatio());
|
},
|
|
<span id='Ext-slider-Multi-method-reversePercentageValue'> /**
|
</span> * @private
|
* Given a Thumb's percentage position 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, reversePercentageValue(25)
|
* returns 200
|
* @param {Number} pos The percentage along the slider track to return a mapped value for
|
* @return {Number} The mapped value for the given position
|
*/
|
reversePercentageValue : function(pos) {
|
return this.minValue + this.getRange() * (pos / 100);
|
},
|
|
<span id='Ext-slider-Multi-method-onDisable'> //private
|
</span> onDisable: function() {
|
var me = this,
|
i = 0,
|
thumbs = me.thumbs,
|
len = thumbs.length,
|
thumb,
|
el,
|
xy;
|
|
me.callParent();
|
|
for (; i < len; i++) {
|
thumb = thumbs[i];
|
el = thumb.el;
|
|
thumb.disable();
|
|
if(Ext.isIE) {
|
//IE breaks when using overflow visible and opacity other than 1.
|
//Create a place holder for the thumb and display it.
|
xy = el.getXY();
|
el.hide();
|
|
me.innerEl.addCls(me.disabledCls).dom.disabled = true;
|
|
if (!me.thumbHolder) {
|
me.thumbHolder = me.endEl.createChild({cls: Ext.baseCSSPrefix + 'slider-thumb ' + me.disabledCls});
|
}
|
|
me.thumbHolder.show().setXY(xy);
|
}
|
}
|
},
|
|
<span id='Ext-slider-Multi-method-onEnable'> //private
|
</span> onEnable: function() {
|
var me = this,
|
i = 0,
|
thumbs = me.thumbs,
|
len = thumbs.length,
|
thumb,
|
el;
|
|
this.callParent();
|
|
for (; i < len; i++) {
|
thumb = thumbs[i];
|
el = thumb.el;
|
|
thumb.enable();
|
|
if (Ext.isIE) {
|
me.innerEl.removeCls(me.disabledCls).dom.disabled = false;
|
|
if (me.thumbHolder) {
|
me.thumbHolder.hide();
|
}
|
|
el.show();
|
me.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 another resize handler to sync the Slider if necessary.
|
*/
|
syncThumbs : function() {
|
if (this.rendered) {
|
var thumbs = this.thumbs,
|
length = thumbs.length,
|
i = 0;
|
|
for (; i < length; i++) {
|
thumbs[i].move(this.calculateThumbPosition(thumbs[i].value));
|
}
|
}
|
},
|
|
<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/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();
|
},
|
|
<span id='Ext-slider-Multi-method-getValues'> /**
|
</span> * Returns an array of values - one for the location of each thumb
|
* @return {Number[]} The set of thumb values
|
*/
|
getValues: function() {
|
var values = [],
|
i = 0,
|
thumbs = this.thumbs,
|
len = thumbs.length;
|
|
for (; i < len; i++) {
|
values.push(thumbs[i].value);
|
}
|
|
return values;
|
},
|
|
<span id='Ext-slider-Multi-method-getSubmitValue'> getSubmitValue: function() {
|
</span> var me = this;
|
return (me.disabled || !me.submitValue) ? null : me.getValue();
|
},
|
|
<span id='Ext-slider-Multi-method-reset'> reset: function() {
|
</span> var me = this,
|
arr = [].concat(me.originalValue),
|
a = 0,
|
aLen = arr.length,
|
val;
|
|
for (; a < aLen; a++) {
|
val = arr[a];
|
|
me.setValue(a, val);
|
}
|
|
me.clearInvalid();
|
// delete here so we reset back to the original state
|
delete me.wasValid;
|
},
|
|
<span id='Ext-slider-Multi-method-setReadOnly'> setReadOnly: function(readOnly){
|
</span> var me = this,
|
thumbs = me.thumbs,
|
len = thumbs.length,
|
i = 0;
|
|
me.callParent(arguments);
|
readOnly = me.readOnly;
|
|
for (; i < len; ++i) {
|
if (readOnly) {
|
thumbs[i].disable();
|
} else {
|
thumbs[i].enable();
|
}
|
|
}
|
|
},
|
|
<span id='Ext-slider-Multi-method-beforeDestroy'> // private
|
</span> beforeDestroy : function() {
|
var me = this,
|
thumbs = me.thumbs,
|
t = 0,
|
tLen = thumbs.length,
|
thumb;
|
|
Ext.destroy(me.innerEl, me.endEl, me.focusEl);
|
|
for (; t < tLen; t++) {
|
thumb = thumbs[t];
|
|
Ext.destroy(thumb);
|
}
|
|
me.callParent();
|
}
|
});
|
</pre>
|
</body>
|
</html>
|
