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="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../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-method-constructor'><span id='Ext-form-field-Spinner'>/**
  19 </span></span> * @class Ext.form.field.Spinner
  20  * @extends Ext.form.field.Trigger
  21  * &lt;p&gt;A field with a pair of up/down spinner buttons. This class is not normally instantiated directly,
  22  * instead it is subclassed and the {@link #onSpinUp} and {@link #onSpinDown} methods are implemented
  23  * to handle when the buttons are clicked. A good example of this is the {@link Ext.form.field.Number} field
  24  * which uses the spinner to increment and decrement the field's value by its {@link Ext.form.field.Number#step step}
  25  * config value.&lt;/p&gt;
  26  * {@img Ext.form.field.Spinner/Ext.form.field.Spinner.png Ext.form.field.Spinner field}
  27  * For 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 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  * &lt;p&gt;By default, pressing the up and down arrow keys will also trigger the onSpinUp and onSpinDown methods;
  68  * to prevent this, set &lt;tt&gt;{@link #keyNavEnabled} = false&lt;/tt&gt;.&lt;/p&gt;
  69  *
  70  * @constructor
  71  * Creates a new Spinner field
  72  * @param {Object} config Configuration options
  73  * @xtype spinnerfield
  74  */
  75 Ext.define('Ext.form.field.Spinner', {
  76     extend: 'Ext.form.field.Trigger',
  77     alias: 'widget.spinnerfield',
  78     alternateClassName: 'Ext.form.Spinner',
  79     requires: ['Ext.util.KeyNav'],
  80
  81     trigger1Cls: Ext.baseCSSPrefix + 'form-spinner-up',
  82     trigger2Cls: Ext.baseCSSPrefix + 'form-spinner-down',
  83
  84 <span id='Ext-form-field-Spinner-cfg-spinUpEnabled'>    /**
  85 </span>     * @cfg {Boolean} spinUpEnabled
  86      * Specifies whether the up spinner button is enabled. Defaults to &lt;tt&gt;true&lt;/tt&gt;. To change this
  87      * after the component is created, use the {@link #setSpinUpEnabled} method.
  88      */
  89     spinUpEnabled: true,
  90
  91 <span id='Ext-form-field-Spinner-cfg-spinDownEnabled'>    /**
  92 </span>     * @cfg {Boolean} spinDownEnabled
  93      * Specifies whether the down spinner button is enabled. Defaults to &lt;tt&gt;true&lt;/tt&gt;. To change this
  94      * after the component is created, use the {@link #setSpinDownEnabled} method.
  95      */
  96     spinDownEnabled: true,
  97
  98 <span id='Ext-form-field-Spinner-cfg-keyNavEnabled'>    /**
  99 </span>     * @cfg {Boolean} keyNavEnabled
 100      * Specifies whether the up and down arrow keys should trigger spinning up and down.
 101      * Defaults to &lt;tt&gt;true&lt;/tt&gt;.
 102      */
 103     keyNavEnabled: true,
 104
 105 <span id='Ext-form-field-Spinner-cfg-mouseWheelEnabled'>    /**
 106 </span>     * @cfg {Boolean} mouseWheelEnabled
 107      * Specifies whether the mouse wheel should trigger spinning up and down while the field has
 108      * focus. Defaults to &lt;tt&gt;true&lt;/tt&gt;.
 109      */
 110     mouseWheelEnabled: true,
 111
 112 <span id='Ext-form-field-Spinner-cfg-repeatTriggerClick'>    /**
 113 </span>     * @cfg {Boolean} repeatTriggerClick Whether a {@link Ext.util.ClickRepeater click repeater} should be
 114      * attached to the spinner buttons. Defaults to &lt;tt&gt;true&lt;/tt&gt;.
 115      */
 116     repeatTriggerClick: true,
 117
 118 <span id='Ext-form-field-Spinner-property-onSpinUp'>    /**
 119 </span>     * This method is called when the spinner up button is clicked, or when the up arrow key is pressed
 120      * if {@link #keyNavEnabled} is &lt;tt&gt;true&lt;/tt&gt;. Must be implemented by subclasses.
 121      */
 122     onSpinUp: Ext.emptyFn,
 123
 124 <span id='Ext-form-field-Spinner-property-onSpinDown'>    /**
 125 </span>     * This method is called when the spinner down button is clicked, or when the down arrow key is pressed
 126      * if {@link #keyNavEnabled} is &lt;tt&gt;true&lt;/tt&gt;. 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 override
 160      */
 161     onRender: function() {
 162         var me = this,
 163             triggers;
 164
 165         me.callParent(arguments);
 166         triggers = me.triggerEl;
 167
 168 <span id='Ext-form-field-Spinner-property-spinUpEl'>        /**
 169 </span>         * @property spinUpEl
 170          * @type Ext.core.Element
 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 spinDownEl
 176          * @type Ext.core.Element
 177          * The spinner down button element
 178          */
 179         me.spinDownEl = triggers.item(1);
 180
 181         // Set initial enabled/disabled states
 182         me.setSpinUpEnabled(me.spinUpEnabled);
 183         me.setSpinDownEnabled(me.spinDownEnabled);
 184
 185         // Init up/down arrow keys
 186         if (me.keyNavEnabled) {
 187             me.spinnerKeyNav = Ext.create('Ext.util.KeyNav', me.inputEl, {
 188                 scope: me,
 189                 up: me.spinUp,
 190                 down: me.spinDown
 191             });
 192         }
 193
 194         // Init mouse wheel
 195         if (me.mouseWheelEnabled) {
 196             me.mon(me.bodyEl, 'mousewheel', me.onMouseWheel, me);
 197         }
 198     },
 199
 200 <span id='Ext-form-field-Spinner-method-getTriggerWidth'>    /**
 201 </span>     * @private override
 202      * Since the triggers are stacked, only measure the width of one of them.
 203      */
 204     getTriggerWidth: function() {
 205         return this.hideTrigger || this.readOnly ? 0 : this.spinUpEl.getWidth() + this.triggerWrap.getFrameWidth('lr');
 206     },
 207
 208 <span id='Ext-form-field-Spinner-method-onTrigger1Click'>    /**
 209 </span>     * @private 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 Handles the spinner down button clicks.
 217      */
 218     onTrigger2Click: function() {
 219         this.spinDown();
 220     },
 221
 222 <span id='Ext-form-field-Spinner-method-spinUp'>    /**
 223 </span>     * Triggers the spinner to step up; fires the {@link #spin} and {@link #spinup} events and calls the
 224      * {@link #onSpinUp} method. Does nothing if the field is {@link #disabled} or if {@link #spinUpEnabled}
 225      * is false.
 226      */
 227     spinUp: function() {
 228         var me = this;
 229         if (me.spinUpEnabled &amp;&amp; !me.disabled) {
 230             me.fireEvent('spin', me, 'up');
 231             me.fireEvent('spinup', me);
 232             me.onSpinUp();
 233         }
 234     },
 235
 236 <span id='Ext-form-field-Spinner-method-spinDown'>    /**
 237 </span>     * Triggers the spinner to step down; fires the {@link #spin} and {@link #spindown} events and calls the
 238      * {@link #onSpinDown} method. Does nothing if the field is {@link #disabled} or if {@link #spinDownEnabled}
 239      * is false.
 240      */
 241     spinDown: function() {
 242         var me = this;
 243         if (me.spinDownEnabled &amp;&amp; !me.disabled) {
 244             me.fireEvent('spin', me, 'down');
 245             me.fireEvent('spindown', me);
 246             me.onSpinDown();
 247         }
 248     },
 249
 250 <span id='Ext-form-field-Spinner-method-setSpinUpEnabled'>    /**
 251 </span>     * Sets whether the spinner up button is enabled.
 252      * @param {Boolean} enabled true to enable the button, false to disable it.
 253      */
 254     setSpinUpEnabled: function(enabled) {
 255         var me = this,
 256             wasEnabled = me.spinUpEnabled;
 257         me.spinUpEnabled = enabled;
 258         if (wasEnabled !== enabled &amp;&amp; me.rendered) {
 259             me.spinUpEl[enabled ? 'removeCls' : 'addCls'](me.trigger1Cls + '-disabled');
 260         }
 261     },
 262
 263 <span id='Ext-form-field-Spinner-method-setSpinDownEnabled'>    /**
 264 </span>     * Sets whether the spinner down button is enabled.
 265      * @param {Boolean} enabled true to enable the button, false to disable it.
 266      */
 267     setSpinDownEnabled: function(enabled) {
 268         var me = this,
 269             wasEnabled = me.spinDownEnabled;
 270         me.spinDownEnabled = enabled;
 271         if (wasEnabled !== enabled &amp;&amp; me.rendered) {
 272             me.spinDownEl[enabled ? 'removeCls' : 'addCls'](me.trigger2Cls + '-disabled');
 273         }
 274     },
 275
 276 <span id='Ext-form-field-Spinner-method-onMouseWheel'>    /**
 277 </span>     * @private
 278      * Handles mousewheel events on the field
 279      */
 280     onMouseWheel: function(e) {
 281         var me = this,
 282             delta;
 283         if (me.hasFocus) {
 284             delta = e.getWheelDelta();
 285             if (delta &gt; 0) {
 286                 me.spinUp();
 287             }
 288             else if (delta &lt; 0) {
 289                 me.spinDown();
 290             }
 291             e.stopEvent();
 292         }
 293     },
 294
 295     onDestroy: function() {
 296         Ext.destroyMembers(this, 'spinnerKeyNav', 'spinUpEl', 'spinDownEl');
 297         this.callParent();
 298     }
 299
 300 });</pre>
 301 </body>
 302 </html>