docs/source/Spinner.html

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