docs/source/Slider.html

   1 <html>\r
   2 <head>\r
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    \r
   4   <title>The source code</title>\r
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   7 </head>\r
   8 <body  onload="prettyPrint();">\r
   9     <pre class="prettyprint lang-js"><div id="cls-Ext.Slider"></div>/**\r
  10  * @class Ext.Slider\r
  11  * @extends Ext.BoxComponent\r
  12  * Slider which supports vertical or horizontal orientation, keyboard adjustments,\r
  13  * configurable snapping, axis clicking and animation. Can be added as an item to\r
  14  * any container. Example usage:\r
  15 <pre><code>\r
  16 new Ext.Slider({\r
  17     renderTo: Ext.getBody(),\r
  18     width: 200,\r
  19     value: 50,\r
  20     increment: 10,\r
  21     minValue: 0,\r
  22     maxValue: 100\r
  23 });\r
  24 </code></pre>\r
  25  */\r
  26 Ext.Slider = Ext.extend(Ext.BoxComponent, {\r
  27         <div id="cfg-Ext.Slider-value"></div>/**\r
  28          * @cfg {Number} value The value to initialize the slider with. Defaults to minValue.\r
  29          */\r
  30         <div id="cfg-Ext.Slider-vertical"></div>/**\r
  31          * @cfg {Boolean} vertical Orient the Slider vertically rather than horizontally, defaults to false.\r
  32          */\r
  33     vertical: false,\r
  34         <div id="cfg-Ext.Slider-minValue"></div>/**\r
  35          * @cfg {Number} minValue The minimum value for the Slider. Defaults to 0.\r
  36          */\r
  37     minValue: 0,\r
  38         <div id="cfg-Ext.Slider-maxValue"></div>/**\r
  39          * @cfg {Number} maxValue The maximum value for the Slider. Defaults to 100.\r
  40          */\r
  41     maxValue: 100,\r
  42     <div id="cfg-Ext.Slider-decimalPrecision."></div>/**\r
  43      * @cfg {Number/Boolean} decimalPrecision.\r
  44      * <p>The number of decimal places to which to round the Slider's value. Defaults to 0.</p>\r
  45      * <p>To disable rounding, configure as <tt><b>false</b></tt>.</p>\r
  46      */\r
  47     decimalPrecision: 0,\r
  48         <div id="cfg-Ext.Slider-keyIncrement"></div>/**\r
  49          * @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.\r
  50          */\r
  51     keyIncrement: 1,\r
  52         <div id="cfg-Ext.Slider-increment"></div>/**\r
  53          * @cfg {Number} increment How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'.\r
  54          */\r
  55     increment: 0,\r
  56         // private\r
  57     clickRange: [5,15],\r
  58         <div id="cfg-Ext.Slider-clickToChange"></div>/**\r
  59          * @cfg {Boolean} clickToChange Determines whether or not clicking on the Slider axis will change the slider. Defaults to true\r
  60          */\r
  61     clickToChange : true,\r
  62         <div id="cfg-Ext.Slider-animate"></div>/**\r
  63          * @cfg {Boolean} animate Turn on or off animation. Defaults to true\r
  64          */\r
  65     animate: true,\r
  66 \r
  67     <div id="prop-Ext.Slider-dragging"></div>/**\r
  68      * True while the thumb is in a drag operation\r
  69      * @type boolean\r
  70      */\r
  71     dragging: false,\r
  72 \r
  73     // private override\r
  74     initComponent : function(){\r
  75         if(!Ext.isDefined(this.value)){\r
  76             this.value = this.minValue;\r
  77         }\r
  78         Ext.Slider.superclass.initComponent.call(this);\r
  79         this.keyIncrement = Math.max(this.increment, this.keyIncrement);\r
  80         this.addEvents(\r
  81             <div id="event-Ext.Slider-beforechange"></div>/**\r
  82              * @event beforechange\r
  83              * Fires before the slider value is changed. By returning false from an event handler,\r
  84              * you can cancel the event and prevent the slider from changing.\r
  85                          * @param {Ext.Slider} slider The slider\r
  86                          * @param {Number} newValue The new value which the slider is being changed to.\r
  87                          * @param {Number} oldValue The old value which the slider was previously.\r
  88              */\r
  89                         'beforechange',\r
  90                         <div id="event-Ext.Slider-change"></div>/**\r
  91                          * @event change\r
  92                          * Fires when the slider value is changed.\r
  93                          * @param {Ext.Slider} slider The slider\r
  94                          * @param {Number} newValue The new value which the slider has been changed to.\r
  95                          */\r
  96                         'change',\r
  97                         <div id="event-Ext.Slider-changecomplete"></div>/**\r
  98                          * @event changecomplete\r
  99                          * Fires when the slider value is changed by the user and any drag operations have completed.\r
 100                          * @param {Ext.Slider} slider The slider\r
 101                          * @param {Number} newValue The new value which the slider has been changed to.\r
 102                          */\r
 103                         'changecomplete',\r
 104                         <div id="event-Ext.Slider-dragstart"></div>/**\r
 105                          * @event dragstart\r
 106              * Fires after a drag operation has started.\r
 107                          * @param {Ext.Slider} slider The slider\r
 108                          * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker\r
 109                          */\r
 110                         'dragstart',\r
 111                         <div id="event-Ext.Slider-drag"></div>/**\r
 112                          * @event drag\r
 113              * Fires continuously during the drag operation while the mouse is moving.\r
 114                          * @param {Ext.Slider} slider The slider\r
 115                          * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker\r
 116                          */\r
 117                         'drag',\r
 118                         <div id="event-Ext.Slider-dragend"></div>/**\r
 119                          * @event dragend\r
 120              * Fires after the drag operation has completed.\r
 121                          * @param {Ext.Slider} slider The slider\r
 122                          * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker\r
 123                          */\r
 124                         'dragend'\r
 125                 );\r
 126 \r
 127         if(this.vertical){\r
 128             Ext.apply(this, Ext.Slider.Vertical);\r
 129         }\r
 130     },\r
 131 \r
 132         // private override\r
 133     onRender : function(){\r
 134         this.autoEl = {\r
 135             cls: 'x-slider ' + (this.vertical ? 'x-slider-vert' : 'x-slider-horz'),\r
 136             cn:{cls:'x-slider-end',cn:{cls:'x-slider-inner',cn:[{cls:'x-slider-thumb'},{tag:'a', cls:'x-slider-focus', href:"#", tabIndex: '-1', hidefocus:'on'}]}}\r
 137         };\r
 138         Ext.Slider.superclass.onRender.apply(this, arguments);\r
 139         this.endEl = this.el.first();\r
 140         this.innerEl = this.endEl.first();\r
 141         this.thumb = this.innerEl.first();\r
 142         this.halfThumb = (this.vertical ? this.thumb.getHeight() : this.thumb.getWidth())/2;\r
 143         this.focusEl = this.thumb.next();\r
 144         this.initEvents();\r
 145     },\r
 146 \r
 147         // private override\r
 148     initEvents : function(){\r
 149         this.thumb.addClassOnOver('x-slider-thumb-over');\r
 150         this.mon(this.el, {\r
 151             scope: this,\r
 152             mousedown: this.onMouseDown,\r
 153             keydown: this.onKeyDown\r
 154         });\r
 155 \r
 156         this.focusEl.swallowEvent("click", true);\r
 157 \r
 158         this.tracker = new Ext.dd.DragTracker({\r
 159             onBeforeStart: this.onBeforeDragStart.createDelegate(this),\r
 160             onStart: this.onDragStart.createDelegate(this),\r
 161             onDrag: this.onDrag.createDelegate(this),\r
 162             onEnd: this.onDragEnd.createDelegate(this),\r
 163             tolerance: 3,\r
 164             autoStart: 300\r
 165         });\r
 166         this.tracker.initEl(this.thumb);\r
 167     },\r
 168 \r
 169         // private override\r
 170     onMouseDown : function(e){\r
 171         if(this.disabled){\r
 172             return;\r
 173         }\r
 174         if(this.clickToChange && e.target != this.thumb.dom){\r
 175             var local = this.innerEl.translatePoints(e.getXY());\r
 176             this.onClickChange(local);\r
 177         }\r
 178         this.focus();\r
 179     },\r
 180 \r
 181         // private\r
 182     onClickChange : function(local){\r
 183         if(local.top > this.clickRange[0] && local.top < this.clickRange[1]){\r
 184             this.setValue(Ext.util.Format.round(this.reverseValue(local.left), this.decimalPrecision), undefined, true);\r
 185         }\r
 186     },\r
 187 \r
 188         // private\r
 189     onKeyDown : function(e){\r
 190         if(this.disabled){e.preventDefault();return;}\r
 191         var k = e.getKey();\r
 192         switch(k){\r
 193             case e.UP:\r
 194             case e.RIGHT:\r
 195                 e.stopEvent();\r
 196                 if(e.ctrlKey){\r
 197                     this.setValue(this.maxValue, undefined, true);\r
 198                 }else{\r
 199                     this.setValue(this.value+this.keyIncrement, undefined, true);\r
 200                 }\r
 201             break;\r
 202             case e.DOWN:\r
 203             case e.LEFT:\r
 204                 e.stopEvent();\r
 205                 if(e.ctrlKey){\r
 206                     this.setValue(this.minValue, undefined, true);\r
 207                 }else{\r
 208                     this.setValue(this.value-this.keyIncrement, undefined, true);\r
 209                 }\r
 210             break;\r
 211             default:\r
 212                 e.preventDefault();\r
 213         }\r
 214     },\r
 215 \r
 216         // private\r
 217     doSnap : function(value){\r
 218         if(!(this.increment && value)){\r
 219             return value;\r
 220         }\r
 221         var newValue = value, \r
 222             inc = this.increment,\r
 223             m = value % inc;\r
 224         if(m != 0){\r
 225             newValue -= m;\r
 226             if(m * 2 > inc){\r
 227                 newValue += inc;\r
 228             }else if(m * 2 < -inc){\r
 229                 newValue -= inc;\r
 230             }\r
 231         }\r
 232         return newValue.constrain(this.minValue,  this.maxValue);\r
 233     },\r
 234 \r
 235         // private\r
 236     afterRender : function(){\r
 237         Ext.Slider.superclass.afterRender.apply(this, arguments);\r
 238         if(this.value !== undefined){\r
 239             var v = this.normalizeValue(this.value);\r
 240             if(v !== this.value){\r
 241                 delete this.value;\r
 242                 this.setValue(v, false);\r
 243             }else{\r
 244                 this.moveThumb(this.translateValue(v), false);\r
 245             }\r
 246         }\r
 247     },\r
 248 \r
 249         // private\r
 250     getRatio : function(){\r
 251         var w = this.innerEl.getWidth(),\r
 252             v = this.maxValue - this.minValue;\r
 253         return v == 0 ? w : (w/v);\r
 254     },\r
 255 \r
 256         // private\r
 257     normalizeValue : function(v){\r
 258         v = this.doSnap(v);\r
 259         v = Ext.util.Format.round(v, this.decimalPrecision);\r
 260         v = v.constrain(this.minValue, this.maxValue);\r
 261         return v;\r
 262     },\r
 263 \r
 264         <div id="method-Ext.Slider-setValue"></div>/**\r
 265          * Programmatically sets the value of the Slider. Ensures that the value is constrained within\r
 266          * the minValue and maxValue.\r
 267          * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue)\r
 268          * @param {Boolean} animate Turn on or off animation, defaults to true\r
 269          */\r
 270     setValue : function(v, animate, changeComplete){\r
 271         v = this.normalizeValue(v);\r
 272         if(v !== this.value && this.fireEvent('beforechange', this, v, this.value) !== false){\r
 273             this.value = v;\r
 274             this.moveThumb(this.translateValue(v), animate !== false);\r
 275             this.fireEvent('change', this, v);\r
 276             if(changeComplete){\r
 277                 this.fireEvent('changecomplete', this, v);\r
 278             }\r
 279         }\r
 280     },\r
 281 \r
 282         // private\r
 283     translateValue : function(v){\r
 284         var ratio = this.getRatio();\r
 285         return (v * ratio) - (this.minValue * ratio) - this.halfThumb;\r
 286     },\r
 287 \r
 288         reverseValue : function(pos){\r
 289         var ratio = this.getRatio();\r
 290         return (pos + this.halfThumb + (this.minValue * ratio)) / ratio;\r
 291     },\r
 292 \r
 293         // private\r
 294     moveThumb: function(v, animate){\r
 295         if(!animate || this.animate === false){\r
 296             this.thumb.setLeft(v);\r
 297         }else{\r
 298             this.thumb.shift({left: v, stopFx: true, duration:.35});\r
 299         }\r
 300     },\r
 301 \r
 302         // private\r
 303     focus : function(){\r
 304         this.focusEl.focus(10);\r
 305     },\r
 306 \r
 307         // private\r
 308     onBeforeDragStart : function(e){\r
 309         return !this.disabled;\r
 310     },\r
 311 \r
 312         // private\r
 313     onDragStart: function(e){\r
 314         this.thumb.addClass('x-slider-thumb-drag');\r
 315         this.dragging = true;\r
 316         this.dragStartValue = this.value;\r
 317         this.fireEvent('dragstart', this, e);\r
 318     },\r
 319 \r
 320         // private\r
 321     onDrag: function(e){\r
 322         var pos = this.innerEl.translatePoints(this.tracker.getXY());\r
 323         this.setValue(Ext.util.Format.round(this.reverseValue(pos.left), this.decimalPrecision), false);\r
 324         this.fireEvent('drag', this, e);\r
 325     },\r
 326 \r
 327         // private\r
 328     onDragEnd: function(e){\r
 329         this.thumb.removeClass('x-slider-thumb-drag');\r
 330         this.dragging = false;\r
 331         this.fireEvent('dragend', this, e);\r
 332         if(this.dragStartValue != this.value){\r
 333             this.fireEvent('changecomplete', this, this.value);\r
 334         }\r
 335     },\r
 336 \r
 337         // private\r
 338     onResize : function(w, h){\r
 339         this.innerEl.setWidth(w - (this.el.getPadding('l') + this.endEl.getPadding('r')));\r
 340         this.syncThumb();\r
 341     },\r
 342     \r
 343     //private\r
 344     onDisable: function(){\r
 345         Ext.Slider.superclass.onDisable.call(this);\r
 346         this.thumb.addClass(this.disabledClass);\r
 347         if(Ext.isIE){\r
 348             //IE breaks when using overflow visible and opacity other than 1.\r
 349             //Create a place holder for the thumb and display it.\r
 350             var xy = this.thumb.getXY();\r
 351             this.thumb.hide();\r
 352             this.innerEl.addClass(this.disabledClass).dom.disabled = true;\r
 353             if (!this.thumbHolder){\r
 354                 this.thumbHolder = this.endEl.createChild({cls: 'x-slider-thumb ' + this.disabledClass});    \r
 355             }\r
 356             this.thumbHolder.show().setXY(xy);\r
 357         }\r
 358     },\r
 359     \r
 360     //private\r
 361     onEnable: function(){\r
 362         Ext.Slider.superclass.onEnable.call(this);\r
 363         this.thumb.removeClass(this.disabledClass);\r
 364         if(Ext.isIE){\r
 365             this.innerEl.removeClass(this.disabledClass).dom.disabled = false;\r
 366             if(this.thumbHolder){\r
 367                 this.thumbHolder.hide();\r
 368             }\r
 369             this.thumb.show();\r
 370             this.syncThumb();\r
 371         }\r
 372     },\r
 373     \r
 374     <div id="method-Ext.Slider-syncThumb"></div>/**\r
 375      * Synchronizes the thumb position to the proper proportion of the total component width based\r
 376      * on the current slider {@link #value}.  This will be called automatically when the Slider\r
 377      * is resized by a layout, but if it is rendered auto width, this method can be called from\r
 378      * another resize handler to sync the Slider if necessary.\r
 379      */\r
 380     syncThumb : function(){\r
 381         if(this.rendered){\r
 382             this.moveThumb(this.translateValue(this.value));\r
 383         }\r
 384     },\r
 385 \r
 386         <div id="method-Ext.Slider-getValue"></div>/**\r
 387          * Returns the current value of the slider\r
 388          * @return {Number} The current value of the slider\r
 389          */\r
 390     getValue : function(){\r
 391         return this.value;\r
 392     },\r
 393     \r
 394     // private\r
 395     beforeDestroy : function(){\r
 396         Ext.destroyMembers(this, 'endEl', 'innerEl', 'thumb', 'halfThumb', 'focusEl', 'tracker', 'thumbHolder');\r
 397         Ext.Slider.superclass.beforeDestroy.call(this);\r
 398     }\r
 399 });\r
 400 Ext.reg('slider', Ext.Slider);\r
 401 \r
 402 // private class to support vertical sliders\r
 403 Ext.Slider.Vertical = {\r
 404     onResize : function(w, h){\r
 405         this.innerEl.setHeight(h - (this.el.getPadding('t') + this.endEl.getPadding('b')));\r
 406         this.syncThumb();\r
 407     },\r
 408 \r
 409     getRatio : function(){\r
 410         var h = this.innerEl.getHeight(),\r
 411             v = this.maxValue - this.minValue;\r
 412         return h/v;\r
 413     },\r
 414 \r
 415     moveThumb: function(v, animate){\r
 416         if(!animate || this.animate === false){\r
 417             this.thumb.setBottom(v);\r
 418         }else{\r
 419             this.thumb.shift({bottom: v, stopFx: true, duration:.35});\r
 420         }\r
 421     },\r
 422 \r
 423     onDrag: function(e){\r
 424         var pos = this.innerEl.translatePoints(this.tracker.getXY()),\r
 425             bottom = this.innerEl.getHeight()-pos.top;\r
 426         this.setValue(this.minValue + Ext.util.Format.round(bottom/this.getRatio(), this.decimalPrecision), false);\r
 427         this.fireEvent('drag', this, e);\r
 428     },\r
 429 \r
 430     onClickChange : function(local){\r
 431         if(local.left > this.clickRange[0] && local.left < this.clickRange[1]){\r
 432             var bottom = this.innerEl.getHeight() - local.top;\r
 433             this.setValue(this.minValue + Ext.util.Format.round(bottom/this.getRatio(), this.decimalPrecision), undefined, true);\r
 434         }\r
 435     }\r
 436 };</pre>    \r
 437 </body>\r
 438 </html>