Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Spinner.html
index 4724eba..a3a734d 100644 (file)
@@ -1,59 +1,72 @@
-<!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'>/**
-</span></span> * @class Ext.form.field.Spinner
- * @extends Ext.form.field.Trigger
- * &lt;p&gt;A field with a pair of up/down spinner buttons. This class is not normally instantiated directly,
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <title>The source code</title>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+  <style type="text/css">
+    .highlight { display: block; background-color: #ddd; }
+  </style>
+  <script type="text/javascript">
+    function highlight() {
+      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+    }
+  </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+  <pre class="prettyprint lang-js"><span id='Ext-form-field-Spinner'>/**
+</span> * 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
  * 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.&lt;/p&gt;
- * {@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:
  * 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 &quot; Pack&quot;
-                }                          
-                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 &quot; Pack&quot;
-                }            
-                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
-        }]
-    });
- * &lt;p&gt;By default, pressing the up and down arrow keys will also trigger the onSpinUp and onSpinDown methods;
- * to prevent this, set &lt;tt&gt;{@link #keyNavEnabled} = false&lt;/tt&gt;.&lt;/p&gt;
  *
  *
- * @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 &quot; Pack&quot;
+ *                 }
+ *                 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 &quot; Pack&quot;
+ *                 }
+ *                 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',
  */
 Ext.define('Ext.form.field.Spinner', {
     extend: 'Ext.form.field.Trigger',
@@ -64,49 +77,53 @@ Ext.define('Ext.form.field.Spinner', {
     trigger1Cls: Ext.baseCSSPrefix + 'form-spinner-up',
     trigger2Cls: Ext.baseCSSPrefix + 'form-spinner-down',
 
     trigger1Cls: Ext.baseCSSPrefix + 'form-spinner-up',
     trigger2Cls: Ext.baseCSSPrefix + 'form-spinner-down',
 
-<span id='Ext-form.field.Spinner-cfg-spinUpEnabled'>    /**
+<span id='Ext-form-field-Spinner-cfg-spinUpEnabled'>    /**
 </span>     * @cfg {Boolean} spinUpEnabled
 </span>     * @cfg {Boolean} spinUpEnabled
-     * Specifies whether the up spinner button is enabled. Defaults to &lt;tt&gt;true&lt;/tt&gt;. 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,
 
      */
     spinUpEnabled: true,
 
-<span id='Ext-form.field.Spinner-cfg-spinDownEnabled'>    /**
+<span id='Ext-form-field-Spinner-cfg-spinDownEnabled'>    /**
 </span>     * @cfg {Boolean} spinDownEnabled
 </span>     * @cfg {Boolean} spinDownEnabled
-     * Specifies whether the down spinner button is enabled. Defaults to &lt;tt&gt;true&lt;/tt&gt;. 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,
 
      */
     spinDownEnabled: true,
 
-<span id='Ext-form.field.Spinner-cfg-keyNavEnabled'>    /**
+<span id='Ext-form-field-Spinner-cfg-keyNavEnabled'>    /**
 </span>     * @cfg {Boolean} keyNavEnabled
 </span>     * @cfg {Boolean} keyNavEnabled
-     * Specifies whether the up and down arrow keys should trigger spinning up and down.
-     * Defaults to &lt;tt&gt;true&lt;/tt&gt;.
+     * Specifies whether the up and down arrow keys should trigger spinning up and down. Defaults to true.
      */
     keyNavEnabled: true,
 
      */
     keyNavEnabled: true,
 
-<span id='Ext-form.field.Spinner-cfg-mouseWheelEnabled'>    /**
+<span id='Ext-form-field-Spinner-cfg-mouseWheelEnabled'>    /**
 </span>     * @cfg {Boolean} mouseWheelEnabled
 </span>     * @cfg {Boolean} mouseWheelEnabled
-     * Specifies whether the mouse wheel should trigger spinning up and down while the field has
-     * focus. Defaults to &lt;tt&gt;true&lt;/tt&gt;.
+     * Specifies whether the mouse wheel should trigger spinning up and down while the field has focus.
+     * Defaults to true.
      */
     mouseWheelEnabled: true,
 
      */
     mouseWheelEnabled: true,
 
-<span id='Ext-form.field.Spinner-cfg-repeatTriggerClick'>    /**
-</span>     * @cfg {Boolean} repeatTriggerClick Whether a {@link Ext.util.ClickRepeater click repeater} should be
-     * attached to the spinner buttons. Defaults to &lt;tt&gt;true&lt;/tt&gt;.
+<span id='Ext-form-field-Spinner-cfg-repeatTriggerClick'>    /**
+</span>     * @cfg {Boolean} repeatTriggerClick
+     * Whether a {@link Ext.util.ClickRepeater click repeater} should be attached to the spinner buttons.
+     * Defaults to true.
      */
     repeatTriggerClick: true,
 
      */
     repeatTriggerClick: true,
 
-<span id='Ext-form.field.Spinner-property-onSpinUp'>    /**
-</span>     * This method is called when the spinner up button is clicked, or when the up arrow key is pressed
-     * if {@link #keyNavEnabled} is &lt;tt&gt;true&lt;/tt&gt;. Must be implemented by subclasses.
+<span id='Ext-form-field-Spinner-method-onSpinUp'>    /**
+</span>     * @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,
 
      */
     onSpinUp: Ext.emptyFn,
 
-<span id='Ext-form.field.Spinner-property-onSpinDown'>    /**
-</span>     * This method is called when the spinner down button is clicked, or when the down arrow key is pressed
-     * if {@link #keyNavEnabled} is &lt;tt&gt;true&lt;/tt&gt;. Must be implemented by subclasses.
+<span id='Ext-form-field-Spinner-method-onSpinDown'>    /**
+</span>     * @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,
 
      */
     onSpinDown: Ext.emptyFn,
 
@@ -114,7 +131,7 @@ Ext.define('Ext.form.field.Spinner', {
         this.callParent();
 
         this.addEvents(
         this.callParent();
 
         this.addEvents(
-<span id='Ext-form.field.Spinner-event-spin'>            /**
+<span id='Ext-form-field-Spinner-event-spin'>            /**
 </span>             * @event spin
              * Fires when the spinner is made to spin up or down.
              * @param {Ext.form.field.Spinner} this
 </span>             * @event spin
              * Fires when the spinner is made to spin up or down.
              * @param {Ext.form.field.Spinner} this
@@ -122,14 +139,14 @@ Ext.define('Ext.form.field.Spinner', {
              */
             'spin',
 
              */
             'spin',
 
-<span id='Ext-form.field.Spinner-event-spinup'>            /**
+<span id='Ext-form-field-Spinner-event-spinup'>            /**
 </span>             * @event spinup
              * Fires when the spinner is made to spin up.
              * @param {Ext.form.field.Spinner} this
              */
             'spinup',
 
 </span>             * @event spinup
              * Fires when the spinner is made to spin up.
              * @param {Ext.form.field.Spinner} this
              */
             'spinup',
 
-<span id='Ext-form.field.Spinner-event-spindown'>            /**
+<span id='Ext-form-field-Spinner-event-spindown'>            /**
 </span>             * @event spindown
              * Fires when the spinner is made to spin down.
              * @param {Ext.form.field.Spinner} this
 </span>             * @event spindown
              * Fires when the spinner is made to spin down.
              * @param {Ext.form.field.Spinner} this
@@ -138,8 +155,9 @@ Ext.define('Ext.form.field.Spinner', {
         );
     },
 
         );
     },
 
-<span id='Ext-form.field.Spinner-method-onRender'>    /**
-</span>     * @private override
+<span id='Ext-form-field-Spinner-method-onRender'>    /**
+</span>     * @private
+     * Override.
      */
     onRender: function() {
         var me = this,
      */
     onRender: function() {
         var me = this,
@@ -148,15 +166,13 @@ Ext.define('Ext.form.field.Spinner', {
         me.callParent(arguments);
         triggers = me.triggerEl;
 
         me.callParent(arguments);
         triggers = me.triggerEl;
 
-<span id='Ext-form.field.Spinner-property-spinUpEl'>        /**
-</span>         * @property spinUpEl
-         * @type Ext.core.Element
+<span id='Ext-form-field-Spinner-property-spinUpEl'>        /**
+</span>         * @property {Ext.Element} spinUpEl
          * The spinner up button element
          */
         me.spinUpEl = triggers.item(0);
          * The spinner up button element
          */
         me.spinUpEl = triggers.item(0);
-<span id='Ext-form.field.Spinner-property-spinDownEl'>        /**
-</span>         * @property spinDownEl
-         * @type Ext.core.Element
+<span id='Ext-form-field-Spinner-property-spinDownEl'>        /**
+</span>         * @property {Ext.Element} spinDownEl
          * The spinner down button element
          */
         me.spinDownEl = triggers.item(1);
          * The spinner down button element
          */
         me.spinDownEl = triggers.item(1);
@@ -180,29 +196,31 @@ Ext.define('Ext.form.field.Spinner', {
         }
     },
 
         }
     },
 
-<span id='Ext-form.field.Spinner-method-getTriggerWidth'>    /**
-</span>     * @private override
-     * Since the triggers are stacked, only measure the width of one of them.
+<span id='Ext-form-field-Spinner-method-getTriggerWidth'>    /**
+</span>     * @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');
     },
 
      */
     getTriggerWidth: function() {
         return this.hideTrigger || this.readOnly ? 0 : this.spinUpEl.getWidth() + this.triggerWrap.getFrameWidth('lr');
     },
 
-<span id='Ext-form.field.Spinner-method-onTrigger1Click'>    /**
-</span>     * @private Handles the spinner up button clicks.
+<span id='Ext-form-field-Spinner-method-onTrigger1Click'>    /**
+</span>     * @private
+     * Handles the spinner up button clicks.
      */
     onTrigger1Click: function() {
         this.spinUp();
     },
 
      */
     onTrigger1Click: function() {
         this.spinUp();
     },
 
-<span id='Ext-form.field.Spinner-method-onTrigger2Click'>    /**
-</span>     * @private Handles the spinner down button clicks.
+<span id='Ext-form-field-Spinner-method-onTrigger2Click'>    /**
+</span>     * @private
+     * Handles the spinner down button clicks.
      */
     onTrigger2Click: function() {
         this.spinDown();
     },
 
      */
     onTrigger2Click: function() {
         this.spinDown();
     },
 
-<span id='Ext-form.field.Spinner-method-spinUp'>    /**
+<span id='Ext-form-field-Spinner-method-spinUp'>    /**
 </span>     * Triggers the spinner to step up; fires the {@link #spin} and {@link #spinup} events and calls the
      * {@link #onSpinUp} method. Does nothing if the field is {@link #disabled} or if {@link #spinUpEnabled}
      * is false.
 </span>     * Triggers the spinner to step up; fires the {@link #spin} and {@link #spinup} events and calls the
      * {@link #onSpinUp} method. Does nothing if the field is {@link #disabled} or if {@link #spinUpEnabled}
      * is false.
@@ -216,7 +234,7 @@ Ext.define('Ext.form.field.Spinner', {
         }
     },
 
         }
     },
 
-<span id='Ext-form.field.Spinner-method-spinDown'>    /**
+<span id='Ext-form-field-Spinner-method-spinDown'>    /**
 </span>     * Triggers the spinner to step down; fires the {@link #spin} and {@link #spindown} events and calls the
      * {@link #onSpinDown} method. Does nothing if the field is {@link #disabled} or if {@link #spinDownEnabled}
      * is false.
 </span>     * Triggers the spinner to step down; fires the {@link #spin} and {@link #spindown} events and calls the
      * {@link #onSpinDown} method. Does nothing if the field is {@link #disabled} or if {@link #spinDownEnabled}
      * is false.
@@ -230,7 +248,7 @@ Ext.define('Ext.form.field.Spinner', {
         }
     },
 
         }
     },
 
-<span id='Ext-form.field.Spinner-method-setSpinUpEnabled'>    /**
+<span id='Ext-form-field-Spinner-method-setSpinUpEnabled'>    /**
 </span>     * Sets whether the spinner up button is enabled.
      * @param {Boolean} enabled true to enable the button, false to disable it.
      */
 </span>     * Sets whether the spinner up button is enabled.
      * @param {Boolean} enabled true to enable the button, false to disable it.
      */
@@ -243,7 +261,7 @@ Ext.define('Ext.form.field.Spinner', {
         }
     },
 
         }
     },
 
-<span id='Ext-form.field.Spinner-method-setSpinDownEnabled'>    /**
+<span id='Ext-form-field-Spinner-method-setSpinDownEnabled'>    /**
 </span>     * Sets whether the spinner down button is enabled.
      * @param {Boolean} enabled true to enable the button, false to disable it.
      */
 </span>     * Sets whether the spinner down button is enabled.
      * @param {Boolean} enabled true to enable the button, false to disable it.
      */
@@ -256,7 +274,7 @@ Ext.define('Ext.form.field.Spinner', {
         }
     },
 
         }
     },
 
-<span id='Ext-form.field.Spinner-method-onMouseWheel'>    /**
+<span id='Ext-form-field-Spinner-method-onMouseWheel'>    /**
 </span>     * @private
      * Handles mousewheel events on the field
      */
 </span>     * @private
      * Handles mousewheel events on the field
      */
@@ -280,4 +298,6 @@ Ext.define('Ext.form.field.Spinner', {
         this.callParent();
     }
 
         this.callParent();
     }
 
-});</pre></pre></body></html>
\ No newline at end of file
+});</pre>
+</body>
+</html>