Upgrade to ExtJS 3.3.0 - Released 10/06/2010
[extjs.git] / docs / source / Slider.html
index 6a4925c..b0d4989 100644 (file)
@@ -7,7 +7,7 @@
 </head>
 <body  onload="prettyPrint();">
     <pre class="prettyprint lang-js">/*!
- * Ext JS Library 3.2.0
+ * Ext JS Library 3.3.0
  * Copyright(c) 2006-2010 Ext JS, Inc.
  * licensing@extjs.com
  * http://www.extjs.com/license
@@ -21,6 +21,12 @@ 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
@@ -167,6 +173,14 @@ Ext.slider.Thumb = Ext.extend(Object, {
         if (this.dragStartValue != value) {
             slider.fireEvent('changecomplete', slider, value, this);
         }
+    },
+    
+    /**
+     * @private
+     * Destroys the thumb
+     */
+    destroy: function(){
+        Ext.destroyMembers(this, 'tracker', 'el');
     }
 });
 
@@ -247,13 +261,6 @@ Ext.slider.MultiSlider = Ext.extend(Ext.BoxComponent, {
      * @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
      */
@@ -288,7 +295,7 @@ Ext.slider.MultiSlider = Ext.extend(Ext.BoxComponent, {
              * @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.
              */
@@ -297,7 +304,7 @@ Ext.slider.MultiSlider = Ext.extend(Ext.BoxComponent, {
             <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
              */
@@ -306,7 +313,7 @@ Ext.slider.MultiSlider = Ext.extend(Ext.BoxComponent, {
             <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
              */
@@ -315,7 +322,7 @@ Ext.slider.MultiSlider = Ext.extend(Ext.BoxComponent, {
             <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',
@@ -323,7 +330,7 @@ Ext.slider.MultiSlider = Ext.extend(Ext.BoxComponent, {
             <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',
@@ -331,7 +338,7 @@ Ext.slider.MultiSlider = Ext.extend(Ext.BoxComponent, {
             <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'
@@ -518,26 +525,29 @@ Ext.slider.MultiSlider = Ext.extend(Ext.BoxComponent, {
      * @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();
@@ -621,11 +631,16 @@ Ext.slider.MultiSlider = Ext.extend(Ext.BoxComponent, {
      */
     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>/**
@@ -635,11 +650,16 @@ Ext.slider.MultiSlider = Ext.extend(Ext.BoxComponent, {
      */
     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>/**
@@ -655,12 +675,14 @@ Ext.slider.MultiSlider = Ext.extend(Ext.BoxComponent, {
 
         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);
+                }
             }
         }
     },
@@ -718,7 +740,10 @@ Ext.slider.MultiSlider = Ext.extend(Ext.BoxComponent, {
         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);
     },
@@ -810,7 +835,12 @@ Ext.slider.MultiSlider = Ext.extend(Ext.BoxComponent, {
 
     // 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);
     }
 });