examples/ux/Spinner.js

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