docs/source/Spinner.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-form-field-Spinner'>/**
  19 </span> * A field with a pair of up/down spinner buttons. This class is not normally instantiated directly,
  20  * instead it is subclassed and the {@link #onSpinUp} and {@link #onSpinDown} methods are implemented
  21  * to handle when the buttons are clicked. A good example of this is the {@link Ext.form.field.Number}
  22  * field which uses the spinner to increment and decrement the field's value by its
  23  * {@link Ext.form.field.Number#step step} config value.
  24  *
  25  * For example:
  26  *
  27  *     @example
  28  *     Ext.define('Ext.ux.CustomSpinner', {
  29  *         extend: 'Ext.form.field.Spinner',
  30  *         alias: 'widget.customspinner',
  31  *
  32  *         // override onSpinUp (using step isn't neccessary)
  33  *         onSpinUp: function() {
  34  *             var me = this;
  35  *             if (!me.readOnly) {
  36  *                 var val = me.step; // set the default value to the step value
  37  *                 if(me.getValue() !== '') {
  38  *                     val = parseInt(me.getValue().slice(0, -5)); // gets rid of &quot; Pack&quot;
  39  *                 }
  40  *                 me.setValue((val + me.step) + ' Pack');
  41  *             }
  42  *         },
  43  *
  44  *         // override onSpinDown
  45  *         onSpinDown: function() {
  46  *             var val, me = this;
  47  *             if (!me.readOnly) {
  48  *                 if(me.getValue() !== '') {
  49  *                     val = parseInt(me.getValue().slice(0, -5)); // gets rid of &quot; Pack&quot;
  50  *                 }
  51  *                 me.setValue((val - me.step) + ' Pack');
  52  *             }
  53  *         }
  54  *     });
  55  *
  56  *     Ext.create('Ext.form.FormPanel', {
  57  *         title: 'Form with SpinnerField',
  58  *         bodyPadding: 5,
  59  *         width: 350,
  60  *         renderTo: Ext.getBody(),
  61  *         items:[{
  62  *             xtype: 'customspinner',
  63  *             fieldLabel: 'How Much Beer?',
  64  *             step: 6
  65  *         }]
  66  *     });
  67  *
  68  * By default, pressing the up and down arrow keys will also trigger the onSpinUp and onSpinDown methods;
  69  * to prevent this, set `{@link #keyNavEnabled} = false`.
  70  */
  71 Ext.define('Ext.form.field.Spinner', {
  72     extend: 'Ext.form.field.Trigger',
  73     alias: 'widget.spinnerfield',
  74     alternateClassName: 'Ext.form.Spinner',
  75     requires: ['Ext.util.KeyNav'],
  76
  77     trigger1Cls: Ext.baseCSSPrefix + 'form-spinner-up',
  78     trigger2Cls: Ext.baseCSSPrefix + 'form-spinner-down',
  79
  80 <span id='Ext-form-field-Spinner-cfg-spinUpEnabled'>    /**
  81 </span>     * @cfg {Boolean} spinUpEnabled
  82      * Specifies whether the up spinner button is enabled. Defaults to true. To change this after the component is
  83      * created, use the {@link #setSpinUpEnabled} method.
  84      */
  85     spinUpEnabled: true,
  86
  87 <span id='Ext-form-field-Spinner-cfg-spinDownEnabled'>    /**
  88 </span>     * @cfg {Boolean} spinDownEnabled
  89      * Specifies whether the down spinner button is enabled. Defaults to true. To change this after the component is
  90      * created, use the {@link #setSpinDownEnabled} method.
  91      */
  92     spinDownEnabled: true,
  93
  94 <span id='Ext-form-field-Spinner-cfg-keyNavEnabled'>    /**
  95 </span>     * @cfg {Boolean} keyNavEnabled
  96      * Specifies whether the up and down arrow keys should trigger spinning up and down. Defaults to true.
  97      */
  98     keyNavEnabled: true,
  99
 100 <span id='Ext-form-field-Spinner-cfg-mouseWheelEnabled'>    /**
 101 </span>     * @cfg {Boolean} mouseWheelEnabled
 102      * Specifies whether the mouse wheel should trigger spinning up and down while the field has focus.
 103      * Defaults to true.
 104      */
 105     mouseWheelEnabled: true,
 106
 107 <span id='Ext-form-field-Spinner-cfg-repeatTriggerClick'>    /**
 108 </span>     * @cfg {Boolean} repeatTriggerClick
 109      * Whether a {@link Ext.util.ClickRepeater click repeater} should be attached to the spinner buttons.
 110      * Defaults to true.
 111      */
 112     repeatTriggerClick: true,
 113
 114 <span id='Ext-form-field-Spinner-method-onSpinUp'>    /**
 115 </span>     * @method
 116      * @protected
 117      * This method is called when the spinner up button is clicked, or when the up arrow key is pressed if
 118      * {@link #keyNavEnabled} is true. Must be implemented by subclasses.
 119      */
 120     onSpinUp: Ext.emptyFn,
 121
 122 <span id='Ext-form-field-Spinner-method-onSpinDown'>    /**
 123 </span>     * @method
 124      * @protected
 125      * This method is called when the spinner down button is clicked, or when the down arrow key is pressed if
 126      * {@link #keyNavEnabled} is true. Must be implemented by subclasses.
 127      */
 128     onSpinDown: Ext.emptyFn,
 129
 130     initComponent: function() {
 131         this.callParent();
 132
 133         this.addEvents(
 134 <span id='Ext-form-field-Spinner-event-spin'>            /**
 135 </span>             * @event spin
 136              * Fires when the spinner is made to spin up or down.
 137              * @param {Ext.form.field.Spinner} this
 138              * @param {String} direction Either 'up' if spinning up, or 'down' if spinning down.
 139              */
 140             'spin',
 141
 142 <span id='Ext-form-field-Spinner-event-spinup'>            /**
 143 </span>             * @event spinup
 144              * Fires when the spinner is made to spin up.
 145              * @param {Ext.form.field.Spinner} this
 146              */
 147             'spinup',
 148
 149 <span id='Ext-form-field-Spinner-event-spindown'>            /**
 150 </span>             * @event spindown
 151              * Fires when the spinner is made to spin down.
 152              * @param {Ext.form.field.Spinner} this
 153              */
 154             'spindown'
 155         );
 156     },
 157
 158 <span id='Ext-form-field-Spinner-method-onRender'>    /**
 159 </span>     * @private
 160      * Override.
 161      */
 162     onRender: function() {
 163         var me = this,
 164             triggers;
 165
 166         me.callParent(arguments);
 167         triggers = me.triggerEl;
 168
 169 <span id='Ext-form-field-Spinner-property-spinUpEl'>        /**
 170 </span>         * @property {Ext.Element} spinUpEl
 171          * The spinner up button element
 172          */
 173         me.spinUpEl = triggers.item(0);
 174 <span id='Ext-form-field-Spinner-property-spinDownEl'>        /**
 175 </span>         * @property {Ext.Element} spinDownEl
 176          * The spinner down button element
 177          */
 178         me.spinDownEl = triggers.item(1);
 179
 180         // Set initial enabled/disabled states
 181         me.setSpinUpEnabled(me.spinUpEnabled);
 182         me.setSpinDownEnabled(me.spinDownEnabled);
 183
 184         // Init up/down arrow keys
 185         if (me.keyNavEnabled) {
 186             me.spinnerKeyNav = Ext.create('Ext.util.KeyNav', me.inputEl, {
 187                 scope: me,
 188                 up: me.spinUp,
 189                 down: me.spinDown
 190             });
 191         }
 192
 193         // Init mouse wheel
 194         if (me.mouseWheelEnabled) {
 195             me.mon(me.bodyEl, 'mousewheel', me.onMouseWheel, me);
 196         }
 197     },
 198
 199 <span id='Ext-form-field-Spinner-method-getTriggerWidth'>    /**
 200 </span>     * @private
 201      * Override. Since the triggers are stacked, only measure the width of one of them.
 202      */
 203     getTriggerWidth: function() {
 204         return this.hideTrigger || this.readOnly ? 0 : this.spinUpEl.getWidth() + this.triggerWrap.getFrameWidth('lr');
 205     },
 206
 207 <span id='Ext-form-field-Spinner-method-onTrigger1Click'>    /**
 208 </span>     * @private
 209      * Handles the spinner up button clicks.
 210      */
 211     onTrigger1Click: function() {
 212         this.spinUp();
 213     },
 214
 215 <span id='Ext-form-field-Spinner-method-onTrigger2Click'>    /**
 216 </span>     * @private
 217      * Handles the spinner down button clicks.
 218      */
 219     onTrigger2Click: function() {
 220         this.spinDown();
 221     },
 222
 223 <span id='Ext-form-field-Spinner-method-spinUp'>    /**
 224 </span>     * Triggers the spinner to step up; fires the {@link #spin} and {@link #spinup} events and calls the
 225      * {@link #onSpinUp} method. Does nothing if the field is {@link #disabled} or if {@link #spinUpEnabled}
 226      * is false.
 227      */
 228     spinUp: function() {
 229         var me = this;
 230         if (me.spinUpEnabled &amp;&amp; !me.disabled) {
 231             me.fireEvent('spin', me, 'up');
 232             me.fireEvent('spinup', me);
 233             me.onSpinUp();
 234         }
 235     },
 236
 237 <span id='Ext-form-field-Spinner-method-spinDown'>    /**
 238 </span>     * Triggers the spinner to step down; fires the {@link #spin} and {@link #spindown} events and calls the
 239      * {@link #onSpinDown} method. Does nothing if the field is {@link #disabled} or if {@link #spinDownEnabled}
 240      * is false.
 241      */
 242     spinDown: function() {
 243         var me = this;
 244         if (me.spinDownEnabled &amp;&amp; !me.disabled) {
 245             me.fireEvent('spin', me, 'down');
 246             me.fireEvent('spindown', me);
 247             me.onSpinDown();
 248         }
 249     },
 250
 251 <span id='Ext-form-field-Spinner-method-setSpinUpEnabled'>    /**
 252 </span>     * Sets whether the spinner up button is enabled.
 253      * @param {Boolean} enabled true to enable the button, false to disable it.
 254      */
 255     setSpinUpEnabled: function(enabled) {
 256         var me = this,
 257             wasEnabled = me.spinUpEnabled;
 258         me.spinUpEnabled = enabled;
 259         if (wasEnabled !== enabled &amp;&amp; me.rendered) {
 260             me.spinUpEl[enabled ? 'removeCls' : 'addCls'](me.trigger1Cls + '-disabled');
 261         }
 262     },
 263
 264 <span id='Ext-form-field-Spinner-method-setSpinDownEnabled'>    /**
 265 </span>     * Sets whether the spinner down button is enabled.
 266      * @param {Boolean} enabled true to enable the button, false to disable it.
 267      */
 268     setSpinDownEnabled: function(enabled) {
 269         var me = this,
 270             wasEnabled = me.spinDownEnabled;
 271         me.spinDownEnabled = enabled;
 272         if (wasEnabled !== enabled &amp;&amp; me.rendered) {
 273             me.spinDownEl[enabled ? 'removeCls' : 'addCls'](me.trigger2Cls + '-disabled');
 274         }
 275     },
 276
 277 <span id='Ext-form-field-Spinner-method-onMouseWheel'>    /**
 278 </span>     * @private
 279      * Handles mousewheel events on the field
 280      */
 281     onMouseWheel: function(e) {
 282         var me = this,
 283             delta;
 284         if (me.hasFocus) {
 285             delta = e.getWheelDelta();
 286             if (delta &gt; 0) {
 287                 me.spinUp();
 288             }
 289             else if (delta &lt; 0) {
 290                 me.spinDown();
 291             }
 292             e.stopEvent();
 293         }
 294     },
 295
 296     onDestroy: function() {
 297         Ext.destroyMembers(this, 'spinnerKeyNav', 'spinUpEl', 'spinDownEl');
 298         this.callParent();
 299     }
 300
 301 });</pre>
 302 </body>
 303 </html>