examples/docs/source/Spinner.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>The source code</title>
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   7 </head>
   8 <body  onload="prettyPrint();">
   9     <pre class="prettyprint lang-js">/*!
  10  * Ext JS Library 3.3.0
  11  * Copyright(c) 2006-2010 Ext JS, Inc.
  12  * licensing@extjs.com
  13  * http://www.extjs.com/license
  14  */
  15 <div id="cls-Ext.ux.Spinner"></div>/**
  16  * @class Ext.ux.Spinner
  17  * @extends Ext.util.Observable
  18  * Creates a Spinner control utilized by Ext.ux.form.SpinnerField
  19  */
  20 Ext.ux.Spinner = Ext.extend(Ext.util.Observable, {
  21     incrementValue: 1,
  22     alternateIncrementValue: 5,
  23     triggerClass: 'x-form-spinner-trigger',
  24     splitterClass: 'x-form-spinner-splitter',
  25     alternateKey: Ext.EventObject.shiftKey,
  26     defaultValue: 0,
  27     accelerate: false,
  28
  29     constructor: function(config){
  30         Ext.ux.Spinner.superclass.constructor.call(this, config);
  31         Ext.apply(this, config);
  32         this.mimicing = false;
  33     },
  34
  35     init: function(field){
  36         this.field = field;
  37
  38         field.afterMethod('onRender', this.doRender, this);
  39         field.afterMethod('onEnable', this.doEnable, this);
  40         field.afterMethod('onDisable', this.doDisable, this);
  41         field.afterMethod('afterRender', this.doAfterRender, this);
  42         field.afterMethod('onResize', this.doResize, this);
  43         field.afterMethod('onFocus', this.doFocus, this);
  44         field.beforeMethod('onDestroy', this.doDestroy, this);
  45     },
  46
  47     doRender: function(ct, position){
  48         var el = this.el = this.field.getEl();
  49         var f = this.field;
  50
  51         if (!f.wrap) {
  52             f.wrap = this.wrap = el.wrap({
  53                 cls: "x-form-field-wrap"
  54             });
  55         }
  56         else {
  57             this.wrap = f.wrap.addClass('x-form-field-wrap');
  58         }
  59
  60         this.trigger = this.wrap.createChild({
  61             tag: "img",
  62             src: Ext.BLANK_IMAGE_URL,
  63             cls: "x-form-trigger " + this.triggerClass
  64         });
  65
  66         if (!f.width) {
  67             this.wrap.setWidth(el.getWidth() + this.trigger.getWidth());
  68         }
  69
  70         this.splitter = this.wrap.createChild({
  71             tag: 'div',
  72             cls: this.splitterClass,
  73             style: 'width:13px; height:2px;'
  74         });
  75         this.splitter.setRight((Ext.isIE) ? 1 : 2).setTop(10).show();
  76
  77         this.proxy = this.trigger.createProxy('', this.splitter, true);
  78         this.proxy.addClass("x-form-spinner-proxy");
  79         this.proxy.setStyle('left', '0px');
  80         this.proxy.setSize(14, 1);
  81         this.proxy.hide();
  82         this.dd = new Ext.dd.DDProxy(this.splitter.dom.id, "SpinnerDrag", {
  83             dragElId: this.proxy.id
  84         });
  85
  86         this.initTrigger();
  87         this.initSpinner();
  88     },
  89
  90     doAfterRender: function(){
  91         var y;
  92         if (Ext.isIE && this.el.getY() != (y = this.trigger.getY())) {
  93             this.el.position();
  94             this.el.setY(y);
  95         }
  96     },
  97
  98     doEnable: function(){
  99         if (this.wrap) {
 100             this.wrap.removeClass(this.field.disabledClass);
 101         }
 102     },
 103
 104     doDisable: function(){
 105         if (this.wrap) {
 106             this.wrap.addClass(this.field.disabledClass);
 107             this.el.removeClass(this.field.disabledClass);
 108         }
 109     },
 110
 111     doResize: function(w, h){
 112         if (typeof w == 'number') {
 113             this.el.setWidth(w - this.trigger.getWidth());
 114         }
 115         this.wrap.setWidth(this.el.getWidth() + this.trigger.getWidth());
 116     },
 117
 118     doFocus: function(){
 119         if (!this.mimicing) {
 120             this.wrap.addClass('x-trigger-wrap-focus');
 121             this.mimicing = true;
 122             Ext.get(Ext.isIE ? document.body : document).on("mousedown", this.mimicBlur, this, {
 123                 delay: 10
 124             });
 125             this.el.on('keydown', this.checkTab, this);
 126         }
 127     },
 128
 129     // private
 130     checkTab: function(e){
 131         if (e.getKey() == e.TAB) {
 132             this.triggerBlur();
 133         }
 134     },
 135
 136     // private
 137     mimicBlur: function(e){
 138         if (!this.wrap.contains(e.target) && this.field.validateBlur(e)) {
 139             this.triggerBlur();
 140         }
 141     },
 142
 143     // private
 144     triggerBlur: function(){
 145         this.mimicing = false;
 146         Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);
 147         this.el.un("keydown", this.checkTab, this);
 148         this.field.beforeBlur();
 149         this.wrap.removeClass('x-trigger-wrap-focus');
 150         this.field.onBlur.call(this.field);
 151     },
 152
 153     initTrigger: function(){
 154         this.trigger.addClassOnOver('x-form-trigger-over');
 155         this.trigger.addClassOnClick('x-form-trigger-click');
 156     },
 157
 158     initSpinner: function(){
 159         this.field.addEvents({
 160             'spin': true,
 161             'spinup': true,
 162             'spindown': true
 163         });
 164
 165         this.keyNav = new Ext.KeyNav(this.el, {
 166             "up": function(e){
 167                 e.preventDefault();
 168                 this.onSpinUp();
 169             },
 170
 171             "down": function(e){
 172                 e.preventDefault();
 173                 this.onSpinDown();
 174             },
 175
 176             "pageUp": function(e){
 177                 e.preventDefault();
 178                 this.onSpinUpAlternate();
 179             },
 180
 181             "pageDown": function(e){
 182                 e.preventDefault();
 183                 this.onSpinDownAlternate();
 184             },
 185
 186             scope: this
 187         });
 188
 189         this.repeater = new Ext.util.ClickRepeater(this.trigger, {
 190             accelerate: this.accelerate
 191         });
 192         this.field.mon(this.repeater, "click", this.onTriggerClick, this, {
 193             preventDefault: true
 194         });
 195
 196         this.field.mon(this.trigger, {
 197             mouseover: this.onMouseOver,
 198             mouseout: this.onMouseOut,
 199             mousemove: this.onMouseMove,
 200             mousedown: this.onMouseDown,
 201             mouseup: this.onMouseUp,
 202             scope: this,
 203             preventDefault: true
 204         });
 205
 206         this.field.mon(this.wrap, "mousewheel", this.handleMouseWheel, this);
 207
 208         this.dd.setXConstraint(0, 0, 10)
 209         this.dd.setYConstraint(1500, 1500, 10);
 210         this.dd.endDrag = this.endDrag.createDelegate(this);
 211         this.dd.startDrag = this.startDrag.createDelegate(this);
 212         this.dd.onDrag = this.onDrag.createDelegate(this);
 213     },
 214
 215     onMouseOver: function(){
 216         if (this.disabled) {
 217             return;
 218         }
 219         var middle = this.getMiddle();
 220         this.tmpHoverClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-overup' : 'x-form-spinner-overdown';
 221         this.trigger.addClass(this.tmpHoverClass);
 222     },
 223
 224     //private
 225     onMouseOut: function(){
 226         this.trigger.removeClass(this.tmpHoverClass);
 227     },
 228
 229     //private
 230     onMouseMove: function(){
 231         if (this.disabled) {
 232             return;
 233         }
 234         var middle = this.getMiddle();
 235         if (((Ext.EventObject.getPageY() > middle) && this.tmpHoverClass == "x-form-spinner-overup") ||
 236         ((Ext.EventObject.getPageY() < middle) && this.tmpHoverClass == "x-form-spinner-overdown")) {
 237         }
 238     },
 239
 240     //private
 241     onMouseDown: function(){
 242         if (this.disabled) {
 243             return;
 244         }
 245         var middle = this.getMiddle();
 246         this.tmpClickClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-clickup' : 'x-form-spinner-clickdown';
 247         this.trigger.addClass(this.tmpClickClass);
 248     },
 249
 250     //private
 251     onMouseUp: function(){
 252         this.trigger.removeClass(this.tmpClickClass);
 253     },
 254
 255     //private
 256     onTriggerClick: function(){
 257         if (this.disabled || this.el.dom.readOnly) {
 258             return;
 259         }
 260         var middle = this.getMiddle();
 261         var ud = (Ext.EventObject.getPageY() < middle) ? 'Up' : 'Down';
 262         this['onSpin' + ud]();
 263     },
 264
 265     //private
 266     getMiddle: function(){
 267         var t = this.trigger.getTop();
 268         var h = this.trigger.getHeight();
 269         var middle = t + (h / 2);
 270         return middle;
 271     },
 272
 273     //private
 274     //checks if control is allowed to spin
 275     isSpinnable: function(){
 276         if (this.disabled || this.el.dom.readOnly) {
 277             Ext.EventObject.preventDefault(); //prevent scrolling when disabled/readonly
 278             return false;
 279         }
 280         return true;
 281     },
 282
 283     handleMouseWheel: function(e){
 284         //disable scrolling when not focused
 285         if (this.wrap.hasClass('x-trigger-wrap-focus') == false) {
 286             return;
 287         }
 288
 289         var delta = e.getWheelDelta();
 290         if (delta > 0) {
 291             this.onSpinUp();
 292             e.stopEvent();
 293         }
 294         else
 295             if (delta < 0) {
 296                 this.onSpinDown();
 297                 e.stopEvent();
 298             }
 299     },
 300
 301     //private
 302     startDrag: function(){
 303         this.proxy.show();
 304         this._previousY = Ext.fly(this.dd.getDragEl()).getTop();
 305     },
 306
 307     //private
 308     endDrag: function(){
 309         this.proxy.hide();
 310     },
 311
 312     //private
 313     onDrag: function(){
 314         if (this.disabled) {
 315             return;
 316         }
 317         var y = Ext.fly(this.dd.getDragEl()).getTop();
 318         var ud = '';
 319
 320         if (this._previousY > y) {
 321             ud = 'Up';
 322         } //up
 323         if (this._previousY < y) {
 324             ud = 'Down';
 325         } //down
 326         if (ud != '') {
 327             this['onSpin' + ud]();
 328         }
 329
 330         this._previousY = y;
 331     },
 332
 333     //private
 334     onSpinUp: function(){
 335         if (this.isSpinnable() == false) {
 336             return;
 337         }
 338         if (Ext.EventObject.shiftKey == true) {
 339             this.onSpinUpAlternate();
 340             return;
 341         }
 342         else {
 343             this.spin(false, false);
 344         }
 345         this.field.fireEvent("spin", this);
 346         this.field.fireEvent("spinup", this);
 347     },
 348
 349     //private
 350     onSpinDown: function(){
 351         if (this.isSpinnable() == false) {
 352             return;
 353         }
 354         if (Ext.EventObject.shiftKey == true) {
 355             this.onSpinDownAlternate();
 356             return;
 357         }
 358         else {
 359             this.spin(true, false);
 360         }
 361         this.field.fireEvent("spin", this);
 362         this.field.fireEvent("spindown", this);
 363     },
 364
 365     //private
 366     onSpinUpAlternate: function(){
 367         if (this.isSpinnable() == false) {
 368             return;
 369         }
 370         this.spin(false, true);
 371         this.field.fireEvent("spin", this);
 372         this.field.fireEvent("spinup", this);
 373     },
 374
 375     //private
 376     onSpinDownAlternate: function(){
 377         if (this.isSpinnable() == false) {
 378             return;
 379         }
 380         this.spin(true, true);
 381         this.field.fireEvent("spin", this);
 382         this.field.fireEvent("spindown", this);
 383     },
 384
 385     spin: function(down, alternate){
 386         var v = parseFloat(this.field.getValue());
 387         var incr = (alternate == true) ? this.alternateIncrementValue : this.incrementValue;
 388         (down == true) ? v -= incr : v += incr;
 389
 390         v = (isNaN(v)) ? this.defaultValue : v;
 391         v = this.fixBoundries(v);
 392         this.field.setRawValue(v);
 393     },
 394
 395     fixBoundries: function(value){
 396         var v = value;
 397
 398         if (this.field.minValue != undefined && v < this.field.minValue) {
 399             v = this.field.minValue;
 400         }
 401         if (this.field.maxValue != undefined && v > this.field.maxValue) {
 402             v = this.field.maxValue;
 403         }
 404
 405         return this.fixPrecision(v);
 406     },
 407
 408     // private
 409     fixPrecision: function(value){
 410         var nan = isNaN(value);
 411         if (!this.field.allowDecimals || this.field.decimalPrecision == -1 || nan || !value) {
 412             return nan ? '' : value;
 413         }
 414         return parseFloat(parseFloat(value).toFixed(this.field.decimalPrecision));
 415     },
 416
 417     doDestroy: function(){
 418         if (this.trigger) {
 419             this.trigger.remove();
 420         }
 421         if (this.wrap) {
 422             this.wrap.remove();
 423             delete this.field.wrap;
 424         }
 425
 426         if (this.splitter) {
 427             this.splitter.remove();
 428         }
 429
 430         if (this.dd) {
 431             this.dd.unreg();
 432             this.dd = null;
 433         }
 434
 435         if (this.proxy) {
 436             this.proxy.remove();
 437         }
 438
 439         if (this.repeater) {
 440             this.repeater.purgeListeners();
 441         }
 442         if (this.mimicing){
 443             Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);
 444         }
 445     }
 446 });
 447
 448 //backwards compat
 449 Ext.form.Spinner = Ext.ux.Spinner;</pre>
 450 </body>
 451 </html>