</head>
<body onload="prettyPrint();">
<pre class="prettyprint lang-js">/*!
- * Ext JS Library 3.2.0
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
+ * Ext JS Library 3.3.1
+ * Copyright(c) 2006-2010 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.com/license
*/
Ext.ns('Ext.slider');
* be created internally by an {@link Ext.slider.MultiSlider Ext.Slider}.
*/
Ext.slider.Thumb = Ext.extend(Object, {
+
+ <div id="prop-Ext.slider.Thumb-dragging"></div>/**
+ * True while the thumb is in a drag operation
+ * @type Boolean
+ */
+ dragging: false,
<div id="cfg-Ext.slider.Thumb-slider"></div>/**
* @constructor
if (this.dragStartValue != value) {
slider.fireEvent('changecomplete', slider, value, this);
}
+ },
+
+ /**
+ * @private
+ * Destroys the thumb
+ */
+ destroy: function(){
+ Ext.destroyMembers(this, 'tracker', 'el');
}
});
* @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
*/
* @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 {Ext.slider.MultiSlider} 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.
*/
<div id="event-Ext.slider.MultiSlider-change"></div>/**
* @event change
* Fires when the slider value is changed.
- * @param {Ext.Slider} slider The slider
+ * @param {Ext.slider.MultiSlider} 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
*/
<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 {Ext.slider.MultiSlider} 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
*/
<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.slider.MultiSlider} 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.slider.MultiSlider} 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.slider.MultiSlider} slider The slider
* @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
*/
'dragend'
* @param {Ext.EventObject} e The Event object
*/
onKeyDown : function(e){
- if(this.disabled){e.preventDefault();return;}
- var k = e.getKey();
+ /*
+ * 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.
+ */
+ if(this.disabled || this.thumbs.length !== 1){
+ e.preventDefault();
+ return;
+ }
+ var k = e.getKey(),
+ val;
switch(k){
case e.UP:
case e.RIGHT:
e.stopEvent();
- if(e.ctrlKey){
- this.setValue(this.maxValue, undefined, true);
- }else{
- this.setValue(this.value+this.keyIncrement, undefined, true);
- }
+ val = e.ctrlKey ? this.maxValue : this.getValue(0) + this.keyIncrement;
+ this.setValue(0, val, undefined, true);
break;
case e.DOWN:
case e.LEFT:
e.stopEvent();
- if(e.ctrlKey){
- this.setValue(this.minValue, undefined, true);
- }else{
- this.setValue(this.value-this.keyIncrement, undefined, true);
- }
+ val = e.ctrlKey ? this.minValue : this.getValue(0) - this.keyIncrement;
+ this.setValue(0, val, undefined, true);
break;
default:
e.preventDefault();
*/
setMinValue : function(val){
this.minValue = val;
- this.syncThumb();
-
- for (var i=0, j = this.thumbs.length; i < j; i++) {
- if (this.thumbs[i].value < val) this.thumbs[i].value = val;
+ var i = 0,
+ thumbs = this.thumbs,
+ len = thumbs.length,
+ t;
+
+ for(; i < len; ++i){
+ t = thumbs[i];
+ t.value = t.value < val ? val : t.value;
}
+ this.syncThumb();
},
<div id="method-Ext.slider.MultiSlider-setMaxValue"></div>/**
*/
setMaxValue : function(val){
this.maxValue = val;
- this.syncThumb();
-
- for (var i=0; i < this.thumbs.length; i++) {
- if (this.thumbs[i].value > val) this.thumbs[i].value = val;
+ var i = 0,
+ thumbs = this.thumbs,
+ len = thumbs.length,
+ t;
+
+ for(; i < len; ++i){
+ t = thumbs[i];
+ t.value = t.value > val ? val : t.value;
}
+ this.syncThumb();
},
<div id="method-Ext.slider.MultiSlider-setValue"></div>/**
v = this.normalizeValue(v);
- if (v !== thumb.value && this.fireEvent('beforechange', this, v, thumb.value) !== false) {
+ if (v !== thumb.value && this.fireEvent('beforechange', this, v, thumb.value, thumb) !== false) {
thumb.value = v;
- this.moveThumb(index, this.translateValue(v), animate !== false);
- this.fireEvent('change', this, v, thumb);
- if(changeComplete){
- this.fireEvent('changecomplete', this, v, thumb);
+ if(this.rendered){
+ this.moveThumb(index, this.translateValue(v), animate !== false);
+ this.fireEvent('change', this, v, thumb);
+ if(changeComplete){
+ this.fireEvent('changecomplete', this, v, thumb);
+ }
}
}
},
for(; i < len; ++i){
thumbs[i].el.stopFx();
}
- this.innerEl.setWidth(w - (this.el.getPadding('l') + this.endEl.getPadding('r')));
+ // check to see if we're using an auto width
+ if(Ext.isNumber(w)){
+ this.innerEl.setWidth(w - (this.el.getPadding('l') + this.endEl.getPadding('r')));
+ }
this.syncThumb();
Ext.slider.MultiSlider.superclass.onResize.apply(this, arguments);
},
// private
beforeDestroy : function(){
- Ext.destroyMembers(this, 'endEl', 'innerEl', 'thumb', 'halfThumb', 'focusEl', 'tracker', 'thumbHolder');
+ var thumbs = this.thumbs;
+ for(var i = 0, len = thumbs.length; i < len; ++i){
+ thumbs[i].destroy();
+ thumbs[i] = null;
+ }
+ Ext.destroyMembers(this, 'endEl', 'innerEl', 'focusEl', 'thumbHolder');
Ext.slider.MultiSlider.superclass.beforeDestroy.call(this);
}
});