-Ext.slider.MultiSlider = Ext.extend(Ext.BoxComponent, {
- <div id="cfg-Ext.slider.MultiSlider-value"></div>/**
- * @cfg {Number} value The value to initialize the slider with. Defaults to minValue.
- */
- <div id="cfg-Ext.slider.MultiSlider-vertical"></div>/**
- * @cfg {Boolean} vertical Orient the Slider vertically rather than horizontally, defaults to false.
- */
- vertical: false,
- <div id="cfg-Ext.slider.MultiSlider-minValue"></div>/**
- * @cfg {Number} minValue The minimum value for the Slider. Defaults to 0.
- */
- minValue: 0,
- <div id="cfg-Ext.slider.MultiSlider-maxValue"></div>/**
- * @cfg {Number} maxValue The maximum value for the Slider. Defaults to 100.
- */
- maxValue: 100,
- <div id="cfg-Ext.slider.MultiSlider-decimalPrecision."></div>/**
- * @cfg {Number/Boolean} decimalPrecision.
- * <p>The number of decimal places to which to round the Slider's value. Defaults to 0.</p>
- * <p>To disable rounding, configure as <tt><b>false</b></tt>.</p>
- */
- decimalPrecision: 0,
- <div id="cfg-Ext.slider.MultiSlider-keyIncrement"></div>/**
- * @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,
- <div id="cfg-Ext.slider.MultiSlider-increment"></div>/**
- * @cfg {Number} increment How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'.
- */
- increment: 0,
-
- /**
- * @private
- * @property clickRange
- * @type Array
- * 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],
-
- <div id="cfg-Ext.slider.MultiSlider-clickToChange"></div>/**
- * @cfg {Boolean} clickToChange Determines whether or not clicking on the Slider axis will change the slider. Defaults to true
- */
- clickToChange : true,
- <div id="cfg-Ext.slider.MultiSlider-animate"></div>/**
- * @cfg {Boolean} animate Turn on or off animation. Defaults to true
- */
- animate: true,
-
- <div id="prop-Ext.slider.MultiSlider-dragging"></div>/**
- * True while the thumb is in a drag operation
- * @type Boolean
- */
- dragging: false,
-
- <div id="cfg-Ext.slider.MultiSlider-constrainThumbs"></div>/**
- * @cfg {Boolean} constrainThumbs True to disallow thumbs from overlapping one another. Defaults to true
- */
- constrainThumbs: true,
-
- /**
- * @private
- * @property topThumbZIndex
- * @type Number
- * The number used internally to set the z index of the top thumb (see promoteThumb for details)
- */
- topThumbZIndex: 10000,
-
- // private override
- initComponent : function(){
- if(!Ext.isDefined(this.value)){
- this.value = this.minValue;
- }
-
- <div id="prop-Ext.slider.MultiSlider-thumbs"></div>/**
- * @property thumbs
- * @type Array
- * Array containing references to each thumb
- */
- this.thumbs = [];
-
- Ext.slider.MultiSlider.superclass.initComponent.call(this);
-
- this.keyIncrement = Math.max(this.increment, this.keyIncrement);
- this.addEvents(
- <div id="event-Ext.slider.MultiSlider-beforechange"></div>/**
- * @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} 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',
-
- <div id="event-Ext.slider.MultiSlider-change"></div>/**
- * @event change
- * Fires when the slider value is changed.
- * @param {Ext.Slider} 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',
-
- <div id="event-Ext.slider.MultiSlider-changecomplete"></div>/**
- * @event changecomplete
- * Fires when the slider value is changed by the user and any drag operations have completed.
- * @param {Ext.Slider} 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',
-
- <div id="event-Ext.slider.MultiSlider-dragstart"></div>/**
- * @event dragstart
- * Fires after a drag operation has started.
- * @param {Ext.Slider} slider The slider
- * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
- */
- 'dragstart',
-
- <div id="event-Ext.slider.MultiSlider-drag"></div>/**
- * @event drag
- * Fires continuously during the drag operation while the mouse is moving.
- * @param {Ext.Slider} slider The slider
- * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
- */
- 'drag',
-
- <div id="event-Ext.slider.MultiSlider-dragend"></div>/**
- * @event dragend
- * Fires after the drag operation has completed.
- * @param {Ext.Slider} slider The slider
- * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
- */
- 'dragend'
- );
-
- <div id="prop-Ext.slider.MultiSlider-values"></div>/**
- * @property values
- * @type Array
- * Array of values to initalize the thumbs with
- */
- if (this.values == undefined || Ext.isEmpty(this.values)) this.values = [0];
-
- var values = this.values;
-
- for (var i=0; i < values.length; i++) {
- this.addThumb(values[i]);
- }
-
- if(this.vertical){
- Ext.apply(this, Ext.slider.Vertical);
- }
- },
-
- <div id="method-Ext.slider.MultiSlider-addThumb"></div>/**
- * Creates a new thumb and adds it to the slider
- * @param {Number} value The initial value to set on the thumb. Defaults to 0
- */
- addThumb: function(value) {
- var thumb = new Ext.slider.Thumb({
- value : value,
- slider : this,
- index : this.thumbs.length,
- constrain: this.constrainThumbs
- });
- this.thumbs.push(thumb);
-
- //render the thumb now if needed
- if (this.rendered) thumb.render();
- },
-
- /**
- * @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,
- zIndex, thumb;
-
- for (var i = 0, j = thumbs.length; i < j; i++) {
- thumb = thumbs[i];
-
- if (thumb == topThumb) {
- zIndex = this.topThumbZIndex;
- } else {
- zIndex = '';
- }
-
- thumb.el.setStyle('zIndex', zIndex);
- }
- },
-
- // private override
- onRender : function() {
- this.autoEl = {
- cls: 'x-slider ' + (this.vertical ? 'x-slider-vert' : 'x-slider-horz'),
- cn : {
- cls: 'x-slider-end',
- cn : {
- cls:'x-slider-inner',
- cn : [{tag:'a', cls:'x-slider-focus', href:"#", tabIndex: '-1', hidefocus:'on'}]
- }
- }
- };
-
- Ext.slider.MultiSlider.superclass.onRender.apply(this, arguments);
-
- this.endEl = this.el.first();
- this.innerEl = this.endEl.first();
- this.focusEl = this.innerEl.child('.x-slider-focus');
-
- //render each thumb
- for (var i=0; i < this.thumbs.length; i++) {
- this.thumbs[i].render();
- }
-
- //calculate the size of half a thumb
- var thumb = this.innerEl.child('.x-slider-thumb');
- this.halfThumb = (this.vertical ? thumb.getHeight() : thumb.getWidth()) / 2;
-
- this.initEvents();
- },
-
- /**
- * @private
- * Adds keyboard and mouse listeners on this.el. Ignores click events on the internal focus element.
- * Creates a new DragTracker which is used to control what happens when the user drags the thumb around.
- */
- initEvents : function(){
- this.mon(this.el, {
- scope : this,
- mousedown: this.onMouseDown,
- keydown : this.onKeyDown
- });
-
- this.focusEl.swallowEvent("click", true);
- },
-
- /**
- * @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){
- if(this.disabled){
- return;
- }