Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / src / form / field / Spinner.js
index 84e846a..63fc256 100644 (file)
@@ -1,59 +1,69 @@
+/*
+
+This file is part of Ext JS 4
+
+Copyright (c) 2011 Sencha Inc
+
+Contact:  http://www.sencha.com/contact
+
+GNU General Public License Usage
+This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
+
+If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
+
+*/
 /**
- * @class Ext.form.field.Spinner
- * @extends Ext.form.field.Trigger
- * <p>A field with a pair of up/down spinner buttons. This class is not normally instantiated directly,
+ * 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.</p>
- * {@img Ext.form.field.Spinner/Ext.form.field.Spinner.png Ext.form.field.Spinner field}
+ * 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:
-     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 " Pack"
-                }                          
-                me.setValue((val + me.step) + ' Pack');
-            }
-        },
-        
-        // override onSpinDown
-        onSpinDown: function() {
-            var me = this;
-            if (!me.readOnly) {
-                if(me.getValue() !== '') {
-                    val = parseInt(me.getValue().slice(0, -5)); // gets rid of " Pack"
-                }            
-                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
-        }]
-    });
- * <p>By default, pressing the up and down arrow keys will also trigger the onSpinUp and onSpinDown methods;
- * to prevent this, set <tt>{@link #keyNavEnabled} = false</tt>.</p>
  *
- * @constructor
- * Creates a new Spinner field
- * @param {Object} config Configuration options
- * @xtype spinnerfield
+ *     @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 " Pack"
+ *                 }
+ *                 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 " Pack"
+ *                 }
+ *                 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',
@@ -66,47 +76,51 @@ Ext.define('Ext.form.field.Spinner', {
 
     /**
      * @cfg {Boolean} spinUpEnabled
-     * Specifies whether the up spinner button is enabled. Defaults to <tt>true</tt>. To change this
-     * after the component is created, use the {@link #setSpinUpEnabled} method.
+     * 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,
 
     /**
      * @cfg {Boolean} spinDownEnabled
-     * Specifies whether the down spinner button is enabled. Defaults to <tt>true</tt>. To change this
-     * after the component is created, use the {@link #setSpinDownEnabled} method.
+     * 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,
 
     /**
      * @cfg {Boolean} keyNavEnabled
-     * Specifies whether the up and down arrow keys should trigger spinning up and down.
-     * Defaults to <tt>true</tt>.
+     * Specifies whether the up and down arrow keys should trigger spinning up and down. Defaults to true.
      */
     keyNavEnabled: true,
 
     /**
      * @cfg {Boolean} mouseWheelEnabled
-     * Specifies whether the mouse wheel should trigger spinning up and down while the field has
-     * focus. Defaults to <tt>true</tt>.
+     * Specifies whether the mouse wheel should trigger spinning up and down while the field has focus.
+     * Defaults to true.
      */
     mouseWheelEnabled: true,
 
     /**
-     * @cfg {Boolean} repeatTriggerClick Whether a {@link Ext.util.ClickRepeater click repeater} should be
-     * attached to the spinner buttons. Defaults to <tt>true</tt>.
+     * @cfg {Boolean} repeatTriggerClick
+     * Whether a {@link Ext.util.ClickRepeater click repeater} should be attached to the spinner buttons.
+     * Defaults to true.
      */
     repeatTriggerClick: true,
 
     /**
-     * This method is called when the spinner up button is clicked, or when the up arrow key is pressed
-     * if {@link #keyNavEnabled} is <tt>true</tt>. Must be implemented by subclasses.
+     * @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,
 
     /**
-     * This method is called when the spinner down button is clicked, or when the down arrow key is pressed
-     * if {@link #keyNavEnabled} is <tt>true</tt>. Must be implemented by subclasses.
+     * @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,
 
@@ -139,7 +153,8 @@ Ext.define('Ext.form.field.Spinner', {
     },
 
     /**
-     * @private override
+     * @private
+     * Override.
      */
     onRender: function() {
         var me = this,
@@ -149,14 +164,12 @@ Ext.define('Ext.form.field.Spinner', {
         triggers = me.triggerEl;
 
         /**
-         * @property spinUpEl
-         * @type Ext.core.Element
+         * @property {Ext.Element} spinUpEl
          * The spinner up button element
          */
         me.spinUpEl = triggers.item(0);
         /**
-         * @property spinDownEl
-         * @type Ext.core.Element
+         * @property {Ext.Element} spinDownEl
          * The spinner down button element
          */
         me.spinDownEl = triggers.item(1);
@@ -181,22 +194,24 @@ Ext.define('Ext.form.field.Spinner', {
     },
 
     /**
-     * @private override
-     * Since the triggers are stacked, only measure the width of one of them.
+     * @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');
     },
 
     /**
-     * @private Handles the spinner up button clicks.
+     * @private
+     * Handles the spinner up button clicks.
      */
     onTrigger1Click: function() {
         this.spinUp();
     },
 
     /**
-     * @private Handles the spinner down button clicks.
+     * @private
+     * Handles the spinner down button clicks.
      */
     onTrigger2Click: function() {
         this.spinDown();
@@ -280,4 +295,4 @@ Ext.define('Ext.form.field.Spinner', {
         this.callParent();
     }
 
-});
\ No newline at end of file
+});