Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Spinner.html
index 09643d9..a3a734d 100644 (file)
+<!DOCTYPE html>
 <html>
 <head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>The source code</title>
-    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
-    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+  <style type="text/css">
+    .highlight { display: block; background-color: #ddd; }
+  </style>
+  <script type="text/javascript">
+    function highlight() {
+      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+    }
+  </script>
 </head>
-<body  onload="prettyPrint();">
-    <pre class="prettyprint lang-js"><div id="cls-Ext.ux.Spinner"></div>/**\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
-Ext.form.Spinner = Ext.ux.Spinner;</pre>
+<body onload="prettyPrint(); highlight();">
+  <pre class="prettyprint lang-js"><span id='Ext-form-field-Spinner'>/**
+</span> * A field with a pair of up/down spinner buttons. This class is not normally instantiated directly,
+ * instead it is subclassed and the {@link #onSpinUp} and {@link #onSpinDown} methods are implemented
+ * to handle when the buttons are clicked. A good example of this is the {@link Ext.form.field.Number}
+ * field which uses the spinner to increment and decrement the field's value by its
+ * {@link Ext.form.field.Number#step step} config value.
+ *
+ * For example:
+ *
+ *     @example
+ *     Ext.define('Ext.ux.CustomSpinner', {
+ *         extend: 'Ext.form.field.Spinner',
+ *         alias: 'widget.customspinner',
+ *
+ *         // override onSpinUp (using step isn't neccessary)
+ *         onSpinUp: function() {
+ *             var me = this;
+ *             if (!me.readOnly) {
+ *                 var val = me.step; // set the default value to the step value
+ *                 if(me.getValue() !== '') {
+ *                     val = parseInt(me.getValue().slice(0, -5)); // gets rid of &quot; Pack&quot;
+ *                 }
+ *                 me.setValue((val + me.step) + ' Pack');
+ *             }
+ *         },
+ *
+ *         // override onSpinDown
+ *         onSpinDown: function() {
+ *             var val, me = this;
+ *             if (!me.readOnly) {
+ *                 if(me.getValue() !== '') {
+ *                     val = parseInt(me.getValue().slice(0, -5)); // gets rid of &quot; Pack&quot;
+ *                 }
+ *                 me.setValue((val - me.step) + ' Pack');
+ *             }
+ *         }
+ *     });
+ *
+ *     Ext.create('Ext.form.FormPanel', {
+ *         title: 'Form with SpinnerField',
+ *         bodyPadding: 5,
+ *         width: 350,
+ *         renderTo: Ext.getBody(),
+ *         items:[{
+ *             xtype: 'customspinner',
+ *             fieldLabel: 'How Much Beer?',
+ *             step: 6
+ *         }]
+ *     });
+ *
+ * By default, pressing the up and down arrow keys will also trigger the onSpinUp and onSpinDown methods;
+ * to prevent this, set `{@link #keyNavEnabled} = false`.
+ */
+Ext.define('Ext.form.field.Spinner', {
+    extend: 'Ext.form.field.Trigger',
+    alias: 'widget.spinnerfield',
+    alternateClassName: 'Ext.form.Spinner',
+    requires: ['Ext.util.KeyNav'],
+
+    trigger1Cls: Ext.baseCSSPrefix + 'form-spinner-up',
+    trigger2Cls: Ext.baseCSSPrefix + 'form-spinner-down',
+
+<span id='Ext-form-field-Spinner-cfg-spinUpEnabled'>    /**
+</span>     * @cfg {Boolean} spinUpEnabled
+     * Specifies whether the up spinner button is enabled. Defaults to true. To change this after the component is
+     * created, use the {@link #setSpinUpEnabled} method.
+     */
+    spinUpEnabled: true,
+
+<span id='Ext-form-field-Spinner-cfg-spinDownEnabled'>    /**
+</span>     * @cfg {Boolean} spinDownEnabled
+     * Specifies whether the down spinner button is enabled. Defaults to true. To change this after the component is
+     * created, use the {@link #setSpinDownEnabled} method.
+     */
+    spinDownEnabled: true,
+
+<span id='Ext-form-field-Spinner-cfg-keyNavEnabled'>    /**
+</span>     * @cfg {Boolean} keyNavEnabled
+     * Specifies whether the up and down arrow keys should trigger spinning up and down. Defaults to true.
+     */
+    keyNavEnabled: true,
+
+<span id='Ext-form-field-Spinner-cfg-mouseWheelEnabled'>    /**
+</span>     * @cfg {Boolean} mouseWheelEnabled
+     * Specifies whether the mouse wheel should trigger spinning up and down while the field has focus.
+     * Defaults to true.
+     */
+    mouseWheelEnabled: true,
+
+<span id='Ext-form-field-Spinner-cfg-repeatTriggerClick'>    /**
+</span>     * @cfg {Boolean} repeatTriggerClick
+     * Whether a {@link Ext.util.ClickRepeater click repeater} should be attached to the spinner buttons.
+     * Defaults to true.
+     */
+    repeatTriggerClick: true,
+
+<span id='Ext-form-field-Spinner-method-onSpinUp'>    /**
+</span>     * @method
+     * @protected
+     * This method is called when the spinner up button is clicked, or when the up arrow key is pressed if
+     * {@link #keyNavEnabled} is true. Must be implemented by subclasses.
+     */
+    onSpinUp: Ext.emptyFn,
+
+<span id='Ext-form-field-Spinner-method-onSpinDown'>    /**
+</span>     * @method
+     * @protected
+     * This method is called when the spinner down button is clicked, or when the down arrow key is pressed if
+     * {@link #keyNavEnabled} is true. Must be implemented by subclasses.
+     */
+    onSpinDown: Ext.emptyFn,
+
+    initComponent: function() {
+        this.callParent();
+
+        this.addEvents(
+<span id='Ext-form-field-Spinner-event-spin'>            /**
+</span>             * @event spin
+             * Fires when the spinner is made to spin up or down.
+             * @param {Ext.form.field.Spinner} this
+             * @param {String} direction Either 'up' if spinning up, or 'down' if spinning down.
+             */
+            'spin',
+
+<span id='Ext-form-field-Spinner-event-spinup'>            /**
+</span>             * @event spinup
+             * Fires when the spinner is made to spin up.
+             * @param {Ext.form.field.Spinner} this
+             */
+            'spinup',
+
+<span id='Ext-form-field-Spinner-event-spindown'>            /**
+</span>             * @event spindown
+             * Fires when the spinner is made to spin down.
+             * @param {Ext.form.field.Spinner} this
+             */
+            'spindown'
+        );
+    },
+
+<span id='Ext-form-field-Spinner-method-onRender'>    /**
+</span>     * @private
+     * Override.
+     */
+    onRender: function() {
+        var me = this,
+            triggers;
+
+        me.callParent(arguments);
+        triggers = me.triggerEl;
+
+<span id='Ext-form-field-Spinner-property-spinUpEl'>        /**
+</span>         * @property {Ext.Element} spinUpEl
+         * The spinner up button element
+         */
+        me.spinUpEl = triggers.item(0);
+<span id='Ext-form-field-Spinner-property-spinDownEl'>        /**
+</span>         * @property {Ext.Element} spinDownEl
+         * The spinner down button element
+         */
+        me.spinDownEl = triggers.item(1);
+
+        // Set initial enabled/disabled states
+        me.setSpinUpEnabled(me.spinUpEnabled);
+        me.setSpinDownEnabled(me.spinDownEnabled);
+
+        // Init up/down arrow keys
+        if (me.keyNavEnabled) {
+            me.spinnerKeyNav = Ext.create('Ext.util.KeyNav', me.inputEl, {
+                scope: me,
+                up: me.spinUp,
+                down: me.spinDown
+            });
+        }
+
+        // Init mouse wheel
+        if (me.mouseWheelEnabled) {
+            me.mon(me.bodyEl, 'mousewheel', me.onMouseWheel, me);
+        }
+    },
+
+<span id='Ext-form-field-Spinner-method-getTriggerWidth'>    /**
+</span>     * @private
+     * Override. Since the triggers are stacked, only measure the width of one of them.
+     */
+    getTriggerWidth: function() {
+        return this.hideTrigger || this.readOnly ? 0 : this.spinUpEl.getWidth() + this.triggerWrap.getFrameWidth('lr');
+    },
+
+<span id='Ext-form-field-Spinner-method-onTrigger1Click'>    /**
+</span>     * @private
+     * Handles the spinner up button clicks.
+     */
+    onTrigger1Click: function() {
+        this.spinUp();
+    },
+
+<span id='Ext-form-field-Spinner-method-onTrigger2Click'>    /**
+</span>     * @private
+     * Handles the spinner down button clicks.
+     */
+    onTrigger2Click: function() {
+        this.spinDown();
+    },
+
+<span id='Ext-form-field-Spinner-method-spinUp'>    /**
+</span>     * Triggers the spinner to step up; fires the {@link #spin} and {@link #spinup} events and calls the
+     * {@link #onSpinUp} method. Does nothing if the field is {@link #disabled} or if {@link #spinUpEnabled}
+     * is false.
+     */
+    spinUp: function() {
+        var me = this;
+        if (me.spinUpEnabled &amp;&amp; !me.disabled) {
+            me.fireEvent('spin', me, 'up');
+            me.fireEvent('spinup', me);
+            me.onSpinUp();
+        }
+    },
+
+<span id='Ext-form-field-Spinner-method-spinDown'>    /**
+</span>     * Triggers the spinner to step down; fires the {@link #spin} and {@link #spindown} events and calls the
+     * {@link #onSpinDown} method. Does nothing if the field is {@link #disabled} or if {@link #spinDownEnabled}
+     * is false.
+     */
+    spinDown: function() {
+        var me = this;
+        if (me.spinDownEnabled &amp;&amp; !me.disabled) {
+            me.fireEvent('spin', me, 'down');
+            me.fireEvent('spindown', me);
+            me.onSpinDown();
+        }
+    },
+
+<span id='Ext-form-field-Spinner-method-setSpinUpEnabled'>    /**
+</span>     * Sets whether the spinner up button is enabled.
+     * @param {Boolean} enabled true to enable the button, false to disable it.
+     */
+    setSpinUpEnabled: function(enabled) {
+        var me = this,
+            wasEnabled = me.spinUpEnabled;
+        me.spinUpEnabled = enabled;
+        if (wasEnabled !== enabled &amp;&amp; me.rendered) {
+            me.spinUpEl[enabled ? 'removeCls' : 'addCls'](me.trigger1Cls + '-disabled');
+        }
+    },
+
+<span id='Ext-form-field-Spinner-method-setSpinDownEnabled'>    /**
+</span>     * Sets whether the spinner down button is enabled.
+     * @param {Boolean} enabled true to enable the button, false to disable it.
+     */
+    setSpinDownEnabled: function(enabled) {
+        var me = this,
+            wasEnabled = me.spinDownEnabled;
+        me.spinDownEnabled = enabled;
+        if (wasEnabled !== enabled &amp;&amp; me.rendered) {
+            me.spinDownEl[enabled ? 'removeCls' : 'addCls'](me.trigger2Cls + '-disabled');
+        }
+    },
+
+<span id='Ext-form-field-Spinner-method-onMouseWheel'>    /**
+</span>     * @private
+     * Handles mousewheel events on the field
+     */
+    onMouseWheel: function(e) {
+        var me = this,
+            delta;
+        if (me.hasFocus) {
+            delta = e.getWheelDelta();
+            if (delta &gt; 0) {
+                me.spinUp();
+            }
+            else if (delta &lt; 0) {
+                me.spinDown();
+            }
+            e.stopEvent();
+        }
+    },
+
+    onDestroy: function() {
+        Ext.destroyMembers(this, 'spinnerKeyNav', 'spinUpEl', 'spinDownEl');
+        this.callParent();
+    }
+
+});</pre>
 </body>
-</html>
\ No newline at end of file
+</html>