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'>/**
  19 </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  */
  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 &lt;tt&gt;true&lt;/tt&gt;. To change this
  83      * after the component is 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 &lt;tt&gt;true&lt;/tt&gt;. To change this
  90      * after the component is 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.
  97      * Defaults to &lt;tt&gt;true&lt;/tt&gt;.
  98      */
  99     keyNavEnabled: true,
 100
 101 <span id='Ext-form-field-Spinner-cfg-mouseWheelEnabled'>    /**
 102 </span>     * @cfg {Boolean} mouseWheelEnabled
 103      * Specifies whether the mouse wheel should trigger spinning up and down while the field has
 104      * focus. Defaults to &lt;tt&gt;true&lt;/tt&gt;.
 105      */
 106     mouseWheelEnabled: true,
 107
 108 <span id='Ext-form-field-Spinner-cfg-repeatTriggerClick'>    /**
 109 </span>     * @cfg {Boolean} repeatTriggerClick Whether a {@link Ext.util.ClickRepeater click repeater} should be
 110      * attached to the spinner buttons. Defaults to &lt;tt&gt;true&lt;/tt&gt;.
 111      */
 112     repeatTriggerClick: true,
 113
 114 <span id='Ext-form-field-Spinner-property-onSpinUp'>    /**
 115 </span>     * This method is called when the spinner up button is clicked, or when the up arrow key is pressed
 116      * if {@link #keyNavEnabled} is &lt;tt&gt;true&lt;/tt&gt;. Must be implemented by subclasses.
 117      */
 118     onSpinUp: Ext.emptyFn,
 119
 120 <span id='Ext-form-field-Spinner-property-onSpinDown'>    /**
 121 </span>     * This method is called when the spinner down button is clicked, or when the down arrow key is pressed
 122      * if {@link #keyNavEnabled} is &lt;tt&gt;true&lt;/tt&gt;. Must be implemented by subclasses.
 123      */
 124     onSpinDown: Ext.emptyFn,
 125
 126     initComponent: function() {
 127         this.callParent();
 128
 129         this.addEvents(
 130 <span id='Ext-form-field-Spinner-event-spin'>            /**
 131 </span>             * @event spin
 132              * Fires when the spinner is made to spin up or down.
 133              * @param {Ext.form.field.Spinner} this
 134              * @param {String} direction Either 'up' if spinning up, or 'down' if spinning down.
 135              */
 136             'spin',
 137
 138 <span id='Ext-form-field-Spinner-event-spinup'>            /**
 139 </span>             * @event spinup
 140              * Fires when the spinner is made to spin up.
 141              * @param {Ext.form.field.Spinner} this
 142              */
 143             'spinup',
 144
 145 <span id='Ext-form-field-Spinner-event-spindown'>            /**
 146 </span>             * @event spindown
 147              * Fires when the spinner is made to spin down.
 148              * @param {Ext.form.field.Spinner} this
 149              */
 150             'spindown'
 151         );
 152     },
 153
 154 <span id='Ext-form-field-Spinner-method-onRender'>    /**
 155 </span>     * @private override
 156      */
 157     onRender: function() {
 158         var me = this,
 159             triggers;
 160
 161         me.callParent(arguments);
 162         triggers = me.triggerEl;
 163
 164 <span id='Ext-form-field-Spinner-property-spinUpEl'>        /**
 165 </span>         * @property spinUpEl
 166          * @type Ext.core.Element
 167          * The spinner up button element
 168          */
 169         me.spinUpEl = triggers.item(0);
 170 <span id='Ext-form-field-Spinner-property-spinDownEl'>        /**
 171 </span>         * @property spinDownEl
 172          * @type Ext.core.Element
 173          * The spinner down button element
 174          */
 175         me.spinDownEl = triggers.item(1);
 176
 177         // Set initial enabled/disabled states
 178         me.setSpinUpEnabled(me.spinUpEnabled);
 179         me.setSpinDownEnabled(me.spinDownEnabled);
 180
 181         // Init up/down arrow keys
 182         if (me.keyNavEnabled) {
 183             me.spinnerKeyNav = Ext.create('Ext.util.KeyNav', me.inputEl, {
 184                 scope: me,
 185                 up: me.spinUp,
 186                 down: me.spinDown
 187             });
 188         }
 189
 190         // Init mouse wheel
 191         if (me.mouseWheelEnabled) {
 192             me.mon(me.bodyEl, 'mousewheel', me.onMouseWheel, me);
 193         }
 194     },
 195
 196 <span id='Ext-form-field-Spinner-method-getTriggerWidth'>    /**
 197 </span>     * @private override
 198      * Since the triggers are stacked, only measure the width of one of them.
 199      */
 200     getTriggerWidth: function() {
 201         return this.hideTrigger || this.readOnly ? 0 : this.spinUpEl.getWidth() + this.triggerWrap.getFrameWidth('lr');
 202     },
 203
 204 <span id='Ext-form-field-Spinner-method-onTrigger1Click'>    /**
 205 </span>     * @private Handles the spinner up button clicks.
 206      */
 207     onTrigger1Click: function() {
 208         this.spinUp();
 209     },
 210
 211 <span id='Ext-form-field-Spinner-method-onTrigger2Click'>    /**
 212 </span>     * @private Handles the spinner down button clicks.
 213      */
 214     onTrigger2Click: function() {
 215         this.spinDown();
 216     },
 217
 218 <span id='Ext-form-field-Spinner-method-spinUp'>    /**
 219 </span>     * Triggers the spinner to step up; fires the {@link #spin} and {@link #spinup} events and calls the
 220      * {@link #onSpinUp} method. Does nothing if the field is {@link #disabled} or if {@link #spinUpEnabled}
 221      * is false.
 222      */
 223     spinUp: function() {
 224         var me = this;
 225         if (me.spinUpEnabled &amp;&amp; !me.disabled) {
 226             me.fireEvent('spin', me, 'up');
 227             me.fireEvent('spinup', me);
 228             me.onSpinUp();
 229         }
 230     },
 231
 232 <span id='Ext-form-field-Spinner-method-spinDown'>    /**
 233 </span>     * Triggers the spinner to step down; fires the {@link #spin} and {@link #spindown} events and calls the
 234      * {@link #onSpinDown} method. Does nothing if the field is {@link #disabled} or if {@link #spinDownEnabled}
 235      * is false.
 236      */
 237     spinDown: function() {
 238         var me = this;
 239         if (me.spinDownEnabled &amp;&amp; !me.disabled) {
 240             me.fireEvent('spin', me, 'down');
 241             me.fireEvent('spindown', me);
 242             me.onSpinDown();
 243         }
 244     },
 245
 246 <span id='Ext-form-field-Spinner-method-setSpinUpEnabled'>    /**
 247 </span>     * Sets whether the spinner up button is enabled.
 248      * @param {Boolean} enabled true to enable the button, false to disable it.
 249      */
 250     setSpinUpEnabled: function(enabled) {
 251         var me = this,
 252             wasEnabled = me.spinUpEnabled;
 253         me.spinUpEnabled = enabled;
 254         if (wasEnabled !== enabled &amp;&amp; me.rendered) {
 255             me.spinUpEl[enabled ? 'removeCls' : 'addCls'](me.trigger1Cls + '-disabled');
 256         }
 257     },
 258
 259 <span id='Ext-form-field-Spinner-method-setSpinDownEnabled'>    /**
 260 </span>     * Sets whether the spinner down button is enabled.
 261      * @param {Boolean} enabled true to enable the button, false to disable it.
 262      */
 263     setSpinDownEnabled: function(enabled) {
 264         var me = this,
 265             wasEnabled = me.spinDownEnabled;
 266         me.spinDownEnabled = enabled;
 267         if (wasEnabled !== enabled &amp;&amp; me.rendered) {
 268             me.spinDownEl[enabled ? 'removeCls' : 'addCls'](me.trigger2Cls + '-disabled');
 269         }
 270     },
 271
 272 <span id='Ext-form-field-Spinner-method-onMouseWheel'>    /**
 273 </span>     * @private
 274      * Handles mousewheel events on the field
 275      */
 276     onMouseWheel: function(e) {
 277         var me = this,
 278             delta;
 279         if (me.hasFocus) {
 280             delta = e.getWheelDelta();
 281             if (delta &gt; 0) {
 282                 me.spinUp();
 283             }
 284             else if (delta &lt; 0) {
 285                 me.spinDown();
 286             }
 287             e.stopEvent();
 288         }
 289     },
 290
 291     onDestroy: function() {
 292         Ext.destroyMembers(this, 'spinnerKeyNav', 'spinUpEl', 'spinDownEl');
 293         this.callParent();
 294     }
 295
 296 });</pre>
 297 </body>
 298 </html>