Upgrade to ExtJS 3.2.0 - Released 03/30/2010
[extjs.git] / examples / ux / Spinner.js
index d755dd2..a184c14 100644 (file)
 /*!
- * Ext JS Library 3.1.1
- * Copyright(c) 2006-2010 Ext JS, LLC
+ * Ext JS Library 3.2.0
+ * Copyright(c) 2006-2010 Ext JS, Inc.
  * licensing@extjs.com
  * http://www.extjs.com/license
  */
-/**\r
- * @class Ext.ux.Spinner\r
- * @extends Ext.util.Observable\r
- * Creates a Spinner control utilized by Ext.ux.form.SpinnerField\r
- */\r
-Ext.ux.Spinner = Ext.extend(Ext.util.Observable, {\r
-    incrementValue: 1,\r
-    alternateIncrementValue: 5,\r
-    triggerClass: 'x-form-spinner-trigger',\r
-    splitterClass: 'x-form-spinner-splitter',\r
-    alternateKey: Ext.EventObject.shiftKey,\r
-    defaultValue: 0,\r
-    accelerate: false,\r
-\r
-    constructor: function(config){\r
-        Ext.ux.Spinner.superclass.constructor.call(this, config);\r
-        Ext.apply(this, config);\r
-        this.mimicing = false;\r
-    },\r
-\r
-    init: function(field){\r
-        this.field = field;\r
-\r
-        field.afterMethod('onRender', this.doRender, this);\r
-        field.afterMethod('onEnable', this.doEnable, this);\r
-        field.afterMethod('onDisable', this.doDisable, this);\r
-        field.afterMethod('afterRender', this.doAfterRender, this);\r
-        field.afterMethod('onResize', this.doResize, this);\r
-        field.afterMethod('onFocus', this.doFocus, this);\r
-        field.beforeMethod('onDestroy', this.doDestroy, this);\r
-    },\r
-\r
-    doRender: function(ct, position){\r
-        var el = this.el = this.field.getEl();\r
-        var f = this.field;\r
-\r
-        if (!f.wrap) {\r
-            f.wrap = this.wrap = el.wrap({\r
-                cls: "x-form-field-wrap"\r
-            });\r
-        }\r
-        else {\r
-            this.wrap = f.wrap.addClass('x-form-field-wrap');\r
-        }\r
-\r
-        this.trigger = this.wrap.createChild({\r
-            tag: "img",\r
-            src: Ext.BLANK_IMAGE_URL,\r
-            cls: "x-form-trigger " + this.triggerClass\r
-        });\r
-\r
-        if (!f.width) {\r
-            this.wrap.setWidth(el.getWidth() + this.trigger.getWidth());\r
-        }\r
-\r
-        this.splitter = this.wrap.createChild({\r
-            tag: 'div',\r
-            cls: this.splitterClass,\r
-            style: 'width:13px; height:2px;'\r
-        });\r
-        this.splitter.setRight((Ext.isIE) ? 1 : 2).setTop(10).show();\r
-\r
-        this.proxy = this.trigger.createProxy('', this.splitter, true);\r
-        this.proxy.addClass("x-form-spinner-proxy");\r
-        this.proxy.setStyle('left', '0px');\r
-        this.proxy.setSize(14, 1);\r
-        this.proxy.hide();\r
-        this.dd = new Ext.dd.DDProxy(this.splitter.dom.id, "SpinnerDrag", {\r
-            dragElId: this.proxy.id\r
-        });\r
-\r
-        this.initTrigger();\r
-        this.initSpinner();\r
-    },\r
-\r
-    doAfterRender: function(){\r
-        var y;\r
-        if (Ext.isIE && this.el.getY() != (y = this.trigger.getY())) {\r
-            this.el.position();\r
-            this.el.setY(y);\r
-        }\r
-    },\r
-\r
-    doEnable: function(){\r
-        if (this.wrap) {\r
-            this.wrap.removeClass(this.field.disabledClass);\r
-        }\r
-    },\r
-\r
-    doDisable: function(){\r
-        if (this.wrap) {\r
-            this.wrap.addClass(this.field.disabledClass);\r
-            this.el.removeClass(this.field.disabledClass);\r
-        }\r
-    },\r
-\r
-    doResize: function(w, h){\r
-        if (typeof w == 'number') {\r
-            this.el.setWidth(w - this.trigger.getWidth());\r
-        }\r
-        this.wrap.setWidth(this.el.getWidth() + this.trigger.getWidth());\r
-    },\r
-\r
-    doFocus: function(){\r
-        if (!this.mimicing) {\r
-            this.wrap.addClass('x-trigger-wrap-focus');\r
-            this.mimicing = true;\r
-            Ext.get(Ext.isIE ? document.body : document).on("mousedown", this.mimicBlur, this, {\r
-                delay: 10\r
-            });\r
-            this.el.on('keydown', this.checkTab, this);\r
-        }\r
-    },\r
-\r
-    // private\r
-    checkTab: function(e){\r
-        if (e.getKey() == e.TAB) {\r
-            this.triggerBlur();\r
-        }\r
-    },\r
-\r
-    // private\r
-    mimicBlur: function(e){\r
-        if (!this.wrap.contains(e.target) && this.field.validateBlur(e)) {\r
-            this.triggerBlur();\r
-        }\r
-    },\r
-\r
-    // private\r
-    triggerBlur: function(){\r
-        this.mimicing = false;\r
-        Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);\r
-        this.el.un("keydown", this.checkTab, this);\r
-        this.field.beforeBlur();\r
-        this.wrap.removeClass('x-trigger-wrap-focus');\r
-        this.field.onBlur.call(this.field);\r
-    },\r
-\r
-    initTrigger: function(){\r
-        this.trigger.addClassOnOver('x-form-trigger-over');\r
-        this.trigger.addClassOnClick('x-form-trigger-click');\r
-    },\r
-\r
-    initSpinner: function(){\r
-        this.field.addEvents({\r
-            'spin': true,\r
-            'spinup': true,\r
-            'spindown': true\r
-        });\r
-\r
-        this.keyNav = new Ext.KeyNav(this.el, {\r
-            "up": function(e){\r
-                e.preventDefault();\r
-                this.onSpinUp();\r
-            },\r
-\r
-            "down": function(e){\r
-                e.preventDefault();\r
-                this.onSpinDown();\r
-            },\r
-\r
-            "pageUp": function(e){\r
-                e.preventDefault();\r
-                this.onSpinUpAlternate();\r
-            },\r
-\r
-            "pageDown": function(e){\r
-                e.preventDefault();\r
-                this.onSpinDownAlternate();\r
-            },\r
-\r
-            scope: this\r
-        });\r
-\r
-        this.repeater = new Ext.util.ClickRepeater(this.trigger, {\r
-            accelerate: this.accelerate\r
-        });\r
-        this.field.mon(this.repeater, "click", this.onTriggerClick, this, {\r
-            preventDefault: true\r
-        });\r
-\r
-        this.field.mon(this.trigger, {\r
-            mouseover: this.onMouseOver,\r
-            mouseout: this.onMouseOut,\r
-            mousemove: this.onMouseMove,\r
-            mousedown: this.onMouseDown,\r
-            mouseup: this.onMouseUp,\r
-            scope: this,\r
-            preventDefault: true\r
-        });\r
-\r
-        this.field.mon(this.wrap, "mousewheel", this.handleMouseWheel, this);\r
-\r
-        this.dd.setXConstraint(0, 0, 10)\r
-        this.dd.setYConstraint(1500, 1500, 10);\r
-        this.dd.endDrag = this.endDrag.createDelegate(this);\r
-        this.dd.startDrag = this.startDrag.createDelegate(this);\r
-        this.dd.onDrag = this.onDrag.createDelegate(this);\r
-    },\r
-\r
-    onMouseOver: function(){\r
-        if (this.disabled) {\r
-            return;\r
-        }\r
-        var middle = this.getMiddle();\r
-        this.tmpHoverClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-overup' : 'x-form-spinner-overdown';\r
-        this.trigger.addClass(this.tmpHoverClass);\r
-    },\r
-\r
-    //private\r
-    onMouseOut: function(){\r
-        this.trigger.removeClass(this.tmpHoverClass);\r
-    },\r
-\r
-    //private\r
-    onMouseMove: function(){\r
-        if (this.disabled) {\r
-            return;\r
-        }\r
-        var middle = this.getMiddle();\r
-        if (((Ext.EventObject.getPageY() > middle) && this.tmpHoverClass == "x-form-spinner-overup") ||\r
-        ((Ext.EventObject.getPageY() < middle) && this.tmpHoverClass == "x-form-spinner-overdown")) {\r
-        }\r
-    },\r
-\r
-    //private\r
-    onMouseDown: function(){\r
-        if (this.disabled) {\r
-            return;\r
-        }\r
-        var middle = this.getMiddle();\r
-        this.tmpClickClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-clickup' : 'x-form-spinner-clickdown';\r
-        this.trigger.addClass(this.tmpClickClass);\r
-    },\r
-\r
-    //private\r
-    onMouseUp: function(){\r
-        this.trigger.removeClass(this.tmpClickClass);\r
-    },\r
-\r
-    //private\r
-    onTriggerClick: function(){\r
-        if (this.disabled || this.el.dom.readOnly) {\r
-            return;\r
-        }\r
-        var middle = this.getMiddle();\r
-        var ud = (Ext.EventObject.getPageY() < middle) ? 'Up' : 'Down';\r
-        this['onSpin' + ud]();\r
-    },\r
-\r
-    //private\r
-    getMiddle: function(){\r
-        var t = this.trigger.getTop();\r
-        var h = this.trigger.getHeight();\r
-        var middle = t + (h / 2);\r
-        return middle;\r
-    },\r
-\r
-    //private\r
-    //checks if control is allowed to spin\r
-    isSpinnable: function(){\r
-        if (this.disabled || this.el.dom.readOnly) {\r
-            Ext.EventObject.preventDefault(); //prevent scrolling when disabled/readonly\r
-            return false;\r
-        }\r
-        return true;\r
-    },\r
-\r
-    handleMouseWheel: function(e){\r
-        //disable scrolling when not focused\r
-        if (this.wrap.hasClass('x-trigger-wrap-focus') == false) {\r
-            return;\r
-        }\r
-\r
-        var delta = e.getWheelDelta();\r
-        if (delta > 0) {\r
-            this.onSpinUp();\r
-            e.stopEvent();\r
-        }\r
-        else\r
-            if (delta < 0) {\r
-                this.onSpinDown();\r
-                e.stopEvent();\r
-            }\r
-    },\r
-\r
-    //private\r
-    startDrag: function(){\r
-        this.proxy.show();\r
-        this._previousY = Ext.fly(this.dd.getDragEl()).getTop();\r
-    },\r
-\r
-    //private\r
-    endDrag: function(){\r
-        this.proxy.hide();\r
-    },\r
-\r
-    //private\r
-    onDrag: function(){\r
-        if (this.disabled) {\r
-            return;\r
-        }\r
-        var y = Ext.fly(this.dd.getDragEl()).getTop();\r
-        var ud = '';\r
-\r
-        if (this._previousY > y) {\r
-            ud = 'Up';\r
-        } //up\r
-        if (this._previousY < y) {\r
-            ud = 'Down';\r
-        } //down\r
-        if (ud != '') {\r
-            this['onSpin' + ud]();\r
-        }\r
-\r
-        this._previousY = y;\r
-    },\r
-\r
-    //private\r
-    onSpinUp: function(){\r
-        if (this.isSpinnable() == false) {\r
-            return;\r
-        }\r
-        if (Ext.EventObject.shiftKey == true) {\r
-            this.onSpinUpAlternate();\r
-            return;\r
-        }\r
-        else {\r
-            this.spin(false, false);\r
-        }\r
-        this.field.fireEvent("spin", this);\r
-        this.field.fireEvent("spinup", this);\r
-    },\r
-\r
-    //private\r
-    onSpinDown: function(){\r
-        if (this.isSpinnable() == false) {\r
-            return;\r
-        }\r
-        if (Ext.EventObject.shiftKey == true) {\r
-            this.onSpinDownAlternate();\r
-            return;\r
-        }\r
-        else {\r
-            this.spin(true, false);\r
-        }\r
-        this.field.fireEvent("spin", this);\r
-        this.field.fireEvent("spindown", this);\r
-    },\r
-\r
-    //private\r
-    onSpinUpAlternate: function(){\r
-        if (this.isSpinnable() == false) {\r
-            return;\r
-        }\r
-        this.spin(false, true);\r
-        this.field.fireEvent("spin", this);\r
-        this.field.fireEvent("spinup", this);\r
-    },\r
-\r
-    //private\r
-    onSpinDownAlternate: function(){\r
-        if (this.isSpinnable() == false) {\r
-            return;\r
-        }\r
-        this.spin(true, true);\r
-        this.field.fireEvent("spin", this);\r
-        this.field.fireEvent("spindown", this);\r
-    },\r
-\r
-    spin: function(down, alternate){\r
-        var v = parseFloat(this.field.getValue());\r
-        var incr = (alternate == true) ? this.alternateIncrementValue : this.incrementValue;\r
-        (down == true) ? v -= incr : v += incr;\r
-\r
-        v = (isNaN(v)) ? this.defaultValue : v;\r
-        v = this.fixBoundries(v);\r
-        this.field.setRawValue(v);\r
-    },\r
-\r
-    fixBoundries: function(value){\r
-        var v = value;\r
-\r
-        if (this.field.minValue != undefined && v < this.field.minValue) {\r
-            v = this.field.minValue;\r
-        }\r
-        if (this.field.maxValue != undefined && v > this.field.maxValue) {\r
-            v = this.field.maxValue;\r
-        }\r
-\r
-        return this.fixPrecision(v);\r
-    },\r
-\r
-    // private\r
-    fixPrecision: function(value){\r
-        var nan = isNaN(value);\r
-        if (!this.field.allowDecimals || this.field.decimalPrecision == -1 || nan || !value) {\r
-            return nan ? '' : value;\r
-        }\r
-        return parseFloat(parseFloat(value).toFixed(this.field.decimalPrecision));\r
-    },\r
-\r
-    doDestroy: function(){\r
-        if (this.trigger) {\r
-            this.trigger.remove();\r
-        }\r
-        if (this.wrap) {\r
-            this.wrap.remove();\r
-            delete this.field.wrap;\r
-        }\r
-\r
-        if (this.splitter) {\r
-            this.splitter.remove();\r
-        }\r
-\r
-        if (this.dd) {\r
-            this.dd.unreg();\r
-            this.dd = null;\r
-        }\r
-\r
-        if (this.proxy) {\r
-            this.proxy.remove();\r
-        }\r
-\r
-        if (this.repeater) {\r
-            this.repeater.purgeListeners();\r
-        }\r
-    }\r
-});\r
-\r
-//backwards compat\r
+/**
+ * @class Ext.ux.Spinner
+ * @extends Ext.util.Observable
+ * Creates a Spinner control utilized by Ext.ux.form.SpinnerField
+ */
+Ext.ux.Spinner = Ext.extend(Ext.util.Observable, {
+    incrementValue: 1,
+    alternateIncrementValue: 5,
+    triggerClass: 'x-form-spinner-trigger',
+    splitterClass: 'x-form-spinner-splitter',
+    alternateKey: Ext.EventObject.shiftKey,
+    defaultValue: 0,
+    accelerate: false,
+
+    constructor: function(config){
+        Ext.ux.Spinner.superclass.constructor.call(this, config);
+        Ext.apply(this, config);
+        this.mimicing = false;
+    },
+
+    init: function(field){
+        this.field = field;
+
+        field.afterMethod('onRender', this.doRender, this);
+        field.afterMethod('onEnable', this.doEnable, this);
+        field.afterMethod('onDisable', this.doDisable, this);
+        field.afterMethod('afterRender', this.doAfterRender, this);
+        field.afterMethod('onResize', this.doResize, this);
+        field.afterMethod('onFocus', this.doFocus, this);
+        field.beforeMethod('onDestroy', this.doDestroy, this);
+    },
+
+    doRender: function(ct, position){
+        var el = this.el = this.field.getEl();
+        var f = this.field;
+
+        if (!f.wrap) {
+            f.wrap = this.wrap = el.wrap({
+                cls: "x-form-field-wrap"
+            });
+        }
+        else {
+            this.wrap = f.wrap.addClass('x-form-field-wrap');
+        }
+
+        this.trigger = this.wrap.createChild({
+            tag: "img",
+            src: Ext.BLANK_IMAGE_URL,
+            cls: "x-form-trigger " + this.triggerClass
+        });
+
+        if (!f.width) {
+            this.wrap.setWidth(el.getWidth() + this.trigger.getWidth());
+        }
+
+        this.splitter = this.wrap.createChild({
+            tag: 'div',
+            cls: this.splitterClass,
+            style: 'width:13px; height:2px;'
+        });
+        this.splitter.setRight((Ext.isIE) ? 1 : 2).setTop(10).show();
+
+        this.proxy = this.trigger.createProxy('', this.splitter, true);
+        this.proxy.addClass("x-form-spinner-proxy");
+        this.proxy.setStyle('left', '0px');
+        this.proxy.setSize(14, 1);
+        this.proxy.hide();
+        this.dd = new Ext.dd.DDProxy(this.splitter.dom.id, "SpinnerDrag", {
+            dragElId: this.proxy.id
+        });
+
+        this.initTrigger();
+        this.initSpinner();
+    },
+
+    doAfterRender: function(){
+        var y;
+        if (Ext.isIE && this.el.getY() != (y = this.trigger.getY())) {
+            this.el.position();
+            this.el.setY(y);
+        }
+    },
+
+    doEnable: function(){
+        if (this.wrap) {
+            this.wrap.removeClass(this.field.disabledClass);
+        }
+    },
+
+    doDisable: function(){
+        if (this.wrap) {
+            this.wrap.addClass(this.field.disabledClass);
+            this.el.removeClass(this.field.disabledClass);
+        }
+    },
+
+    doResize: function(w, h){
+        if (typeof w == 'number') {
+            this.el.setWidth(w - this.trigger.getWidth());
+        }
+        this.wrap.setWidth(this.el.getWidth() + this.trigger.getWidth());
+    },
+
+    doFocus: function(){
+        if (!this.mimicing) {
+            this.wrap.addClass('x-trigger-wrap-focus');
+            this.mimicing = true;
+            Ext.get(Ext.isIE ? document.body : document).on("mousedown", this.mimicBlur, this, {
+                delay: 10
+            });
+            this.el.on('keydown', this.checkTab, this);
+        }
+    },
+
+    // private
+    checkTab: function(e){
+        if (e.getKey() == e.TAB) {
+            this.triggerBlur();
+        }
+    },
+
+    // private
+    mimicBlur: function(e){
+        if (!this.wrap.contains(e.target) && this.field.validateBlur(e)) {
+            this.triggerBlur();
+        }
+    },
+
+    // private
+    triggerBlur: function(){
+        this.mimicing = false;
+        Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);
+        this.el.un("keydown", this.checkTab, this);
+        this.field.beforeBlur();
+        this.wrap.removeClass('x-trigger-wrap-focus');
+        this.field.onBlur.call(this.field);
+    },
+
+    initTrigger: function(){
+        this.trigger.addClassOnOver('x-form-trigger-over');
+        this.trigger.addClassOnClick('x-form-trigger-click');
+    },
+
+    initSpinner: function(){
+        this.field.addEvents({
+            'spin': true,
+            'spinup': true,
+            'spindown': true
+        });
+
+        this.keyNav = new Ext.KeyNav(this.el, {
+            "up": function(e){
+                e.preventDefault();
+                this.onSpinUp();
+            },
+
+            "down": function(e){
+                e.preventDefault();
+                this.onSpinDown();
+            },
+
+            "pageUp": function(e){
+                e.preventDefault();
+                this.onSpinUpAlternate();
+            },
+
+            "pageDown": function(e){
+                e.preventDefault();
+                this.onSpinDownAlternate();
+            },
+
+            scope: this
+        });
+
+        this.repeater = new Ext.util.ClickRepeater(this.trigger, {
+            accelerate: this.accelerate
+        });
+        this.field.mon(this.repeater, "click", this.onTriggerClick, this, {
+            preventDefault: true
+        });
+
+        this.field.mon(this.trigger, {
+            mouseover: this.onMouseOver,
+            mouseout: this.onMouseOut,
+            mousemove: this.onMouseMove,
+            mousedown: this.onMouseDown,
+            mouseup: this.onMouseUp,
+            scope: this,
+            preventDefault: true
+        });
+
+        this.field.mon(this.wrap, "mousewheel", this.handleMouseWheel, this);
+
+        this.dd.setXConstraint(0, 0, 10)
+        this.dd.setYConstraint(1500, 1500, 10);
+        this.dd.endDrag = this.endDrag.createDelegate(this);
+        this.dd.startDrag = this.startDrag.createDelegate(this);
+        this.dd.onDrag = this.onDrag.createDelegate(this);
+    },
+
+    onMouseOver: function(){
+        if (this.disabled) {
+            return;
+        }
+        var middle = this.getMiddle();
+        this.tmpHoverClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-overup' : 'x-form-spinner-overdown';
+        this.trigger.addClass(this.tmpHoverClass);
+    },
+
+    //private
+    onMouseOut: function(){
+        this.trigger.removeClass(this.tmpHoverClass);
+    },
+
+    //private
+    onMouseMove: function(){
+        if (this.disabled) {
+            return;
+        }
+        var middle = this.getMiddle();
+        if (((Ext.EventObject.getPageY() > middle) && this.tmpHoverClass == "x-form-spinner-overup") ||
+        ((Ext.EventObject.getPageY() < middle) && this.tmpHoverClass == "x-form-spinner-overdown")) {
+        }
+    },
+
+    //private
+    onMouseDown: function(){
+        if (this.disabled) {
+            return;
+        }
+        var middle = this.getMiddle();
+        this.tmpClickClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-clickup' : 'x-form-spinner-clickdown';
+        this.trigger.addClass(this.tmpClickClass);
+    },
+
+    //private
+    onMouseUp: function(){
+        this.trigger.removeClass(this.tmpClickClass);
+    },
+
+    //private
+    onTriggerClick: function(){
+        if (this.disabled || this.el.dom.readOnly) {
+            return;
+        }
+        var middle = this.getMiddle();
+        var ud = (Ext.EventObject.getPageY() < middle) ? 'Up' : 'Down';
+        this['onSpin' + ud]();
+    },
+
+    //private
+    getMiddle: function(){
+        var t = this.trigger.getTop();
+        var h = this.trigger.getHeight();
+        var middle = t + (h / 2);
+        return middle;
+    },
+
+    //private
+    //checks if control is allowed to spin
+    isSpinnable: function(){
+        if (this.disabled || this.el.dom.readOnly) {
+            Ext.EventObject.preventDefault(); //prevent scrolling when disabled/readonly
+            return false;
+        }
+        return true;
+    },
+
+    handleMouseWheel: function(e){
+        //disable scrolling when not focused
+        if (this.wrap.hasClass('x-trigger-wrap-focus') == false) {
+            return;
+        }
+
+        var delta = e.getWheelDelta();
+        if (delta > 0) {
+            this.onSpinUp();
+            e.stopEvent();
+        }
+        else
+            if (delta < 0) {
+                this.onSpinDown();
+                e.stopEvent();
+            }
+    },
+
+    //private
+    startDrag: function(){
+        this.proxy.show();
+        this._previousY = Ext.fly(this.dd.getDragEl()).getTop();
+    },
+
+    //private
+    endDrag: function(){
+        this.proxy.hide();
+    },
+
+    //private
+    onDrag: function(){
+        if (this.disabled) {
+            return;
+        }
+        var y = Ext.fly(this.dd.getDragEl()).getTop();
+        var ud = '';
+
+        if (this._previousY > y) {
+            ud = 'Up';
+        } //up
+        if (this._previousY < y) {
+            ud = 'Down';
+        } //down
+        if (ud != '') {
+            this['onSpin' + ud]();
+        }
+
+        this._previousY = y;
+    },
+
+    //private
+    onSpinUp: function(){
+        if (this.isSpinnable() == false) {
+            return;
+        }
+        if (Ext.EventObject.shiftKey == true) {
+            this.onSpinUpAlternate();
+            return;
+        }
+        else {
+            this.spin(false, false);
+        }
+        this.field.fireEvent("spin", this);
+        this.field.fireEvent("spinup", this);
+    },
+
+    //private
+    onSpinDown: function(){
+        if (this.isSpinnable() == false) {
+            return;
+        }
+        if (Ext.EventObject.shiftKey == true) {
+            this.onSpinDownAlternate();
+            return;
+        }
+        else {
+            this.spin(true, false);
+        }
+        this.field.fireEvent("spin", this);
+        this.field.fireEvent("spindown", this);
+    },
+
+    //private
+    onSpinUpAlternate: function(){
+        if (this.isSpinnable() == false) {
+            return;
+        }
+        this.spin(false, true);
+        this.field.fireEvent("spin", this);
+        this.field.fireEvent("spinup", this);
+    },
+
+    //private
+    onSpinDownAlternate: function(){
+        if (this.isSpinnable() == false) {
+            return;
+        }
+        this.spin(true, true);
+        this.field.fireEvent("spin", this);
+        this.field.fireEvent("spindown", this);
+    },
+
+    spin: function(down, alternate){
+        var v = parseFloat(this.field.getValue());
+        var incr = (alternate == true) ? this.alternateIncrementValue : this.incrementValue;
+        (down == true) ? v -= incr : v += incr;
+
+        v = (isNaN(v)) ? this.defaultValue : v;
+        v = this.fixBoundries(v);
+        this.field.setRawValue(v);
+    },
+
+    fixBoundries: function(value){
+        var v = value;
+
+        if (this.field.minValue != undefined && v < this.field.minValue) {
+            v = this.field.minValue;
+        }
+        if (this.field.maxValue != undefined && v > this.field.maxValue) {
+            v = this.field.maxValue;
+        }
+
+        return this.fixPrecision(v);
+    },
+
+    // private
+    fixPrecision: function(value){
+        var nan = isNaN(value);
+        if (!this.field.allowDecimals || this.field.decimalPrecision == -1 || nan || !value) {
+            return nan ? '' : value;
+        }
+        return parseFloat(parseFloat(value).toFixed(this.field.decimalPrecision));
+    },
+
+    doDestroy: function(){
+        if (this.trigger) {
+            this.trigger.remove();
+        }
+        if (this.wrap) {
+            this.wrap.remove();
+            delete this.field.wrap;
+        }
+
+        if (this.splitter) {
+            this.splitter.remove();
+        }
+
+        if (this.dd) {
+            this.dd.unreg();
+            this.dd = null;
+        }
+
+        if (this.proxy) {
+            this.proxy.remove();
+        }
+
+        if (this.repeater) {
+            this.repeater.purgeListeners();
+        }
+    }
+});
+
+//backwards compat
 Ext.form.Spinner = Ext.ux.Spinner;
\ No newline at end of file