docs/source/Number.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-Number-method-constructor'><span id='Ext-form-field-Number'>/**
  19 </span></span> * @class Ext.form.field.Number
  20  * @extends Ext.form.field.Spinner
  21
  22 A numeric text field that provides automatic keystroke filtering to disallow non-numeric characters,
  23 and numeric validation to limit the value to a range of valid numbers. The range of acceptable number
  24 values can be controlled by setting the {@link #minValue} and {@link #maxValue} configs, and fractional
  25 decimals can be disallowed by setting {@link #allowDecimals} to `false`.
  26
  27 By default, the number field is also rendered with a set of up/down spinner buttons and has
  28 up/down arrow key and mouse wheel event listeners attached for incrementing/decrementing the value by the
  29 {@link #step} value. To hide the spinner buttons set `{@link #hideTrigger hideTrigger}:true`; to disable the arrow key
  30 and mouse wheel handlers set `{@link #keyNavEnabled keyNavEnabled}:false` and
  31 `{@link #mouseWheelEnabled mouseWheelEnabled}:false`. See the example below.
  32
  33 #Example usage:#
  34 {@img Ext.form.Number/Ext.form.Number1.png Ext.form.Number component}
  35     Ext.create('Ext.form.Panel', {
  36         title: 'On The Wall',
  37         width: 300,
  38         bodyPadding: 10,
  39         renderTo: Ext.getBody(),
  40         items: [{
  41             xtype: 'numberfield',
  42             anchor: '100%',
  43             name: 'bottles',
  44             fieldLabel: 'Bottles of Beer',
  45             value: 99,
  46             maxValue: 99,
  47             minValue: 0
  48         }],
  49         buttons: [{
  50             text: 'Take one down, pass it around',
  51             handler: function() {
  52                 this.up('form').down('[name=bottles]').spinDown();
  53             }
  54         }]
  55     });
  56
  57 #Removing UI Enhancements#
  58 {@img Ext.form.Number/Ext.form.Number2.png Ext.form.Number component}
  59     Ext.create('Ext.form.Panel', {
  60         title: 'Personal Info',
  61         width: 300,
  62         bodyPadding: 10,
  63         renderTo: Ext.getBody(),
  64         items: [{
  65             xtype: 'numberfield',
  66             anchor: '100%',
  67             name: 'age',
  68             fieldLabel: 'Age',
  69             minValue: 0, //prevents negative numbers
  70
  71             // Remove spinner buttons, and arrow key and mouse wheel listeners
  72             hideTrigger: true,
  73             keyNavEnabled: false,
  74             mouseWheelEnabled: false
  75         }]
  76     });
  77
  78 #Using Step#
  79     Ext.create('Ext.form.Panel', {
  80         renderTo: Ext.getBody(),
  81         title: 'Step',
  82         width: 300,
  83         bodyPadding: 10,
  84         items: [{
  85             xtype: 'numberfield',
  86             anchor: '100%',
  87             name: 'evens',
  88             fieldLabel: 'Even Numbers',
  89
  90             // Set step so it skips every other number
  91             step: 2,
  92             value: 0,
  93
  94             // Add change handler to force user-entered numbers to evens
  95             listeners: {
  96                 change: function(field, value) {
  97                     value = parseInt(value, 10);
  98                     field.setValue(value + value % 2);
  99                 }
 100             }
 101         }]
 102     });
 103
 104
 105  * @constructor
 106  * Creates a new Number field
 107  * @param {Object} config Configuration options
 108  *
 109  * @xtype numberfield
 110  * @markdown
 111  * @docauthor Jason Johnston &lt;jason@sencha.com&gt;
 112  */
 113 Ext.define('Ext.form.field.Number', {
 114     extend:'Ext.form.field.Spinner',
 115     alias: 'widget.numberfield',
 116     alternateClassName: ['Ext.form.NumberField', 'Ext.form.Number'],
 117
 118 <span id='Ext-form-field-Number-cfg-stripCharsRe'>    /**
 119 </span>     * @cfg {RegExp} stripCharsRe @hide
 120      */
 121 <span id='Ext-form-field-Number-cfg-maskRe'>    /**
 122 </span>     * @cfg {RegExp} maskRe @hide
 123      */
 124
 125 <span id='Ext-form-field-Number-cfg-allowDecimals'>    /**
 126 </span>     * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true)
 127      */
 128     allowDecimals : true,
 129
 130 <span id='Ext-form-field-Number-cfg-decimalSeparator'>    /**
 131 </span>     * @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.')
 132      */
 133     decimalSeparator : '.',
 134
 135 <span id='Ext-form-field-Number-cfg-decimalPrecision'>    /**
 136 </span>     * @cfg {Number} decimalPrecision The maximum precision to display after the decimal separator (defaults to 2)
 137      */
 138     decimalPrecision : 2,
 139
 140 <span id='Ext-form-field-Number-cfg-minValue'>    /**
 141 </span>     * @cfg {Number} minValue The minimum allowed value (defaults to Number.NEGATIVE_INFINITY). Will be used by
 142      * the field's validation logic, and for
 143      * {@link Ext.form.field.Spinner#setSpinUpEnabled enabling/disabling the down spinner button}.
 144      */
 145     minValue: Number.NEGATIVE_INFINITY,
 146
 147 <span id='Ext-form-field-Number-cfg-maxValue'>    /**
 148 </span>     * @cfg {Number} maxValue The maximum allowed value (defaults to Number.MAX_VALUE). Will be used by
 149      * the field's validation logic, and for
 150      * {@link Ext.form.field.Spinner#setSpinUpEnabled enabling/disabling the up spinner button}.
 151      */
 152     maxValue: Number.MAX_VALUE,
 153
 154 <span id='Ext-form-field-Number-cfg-step'>    /**
 155 </span>     * @cfg {Number} step Specifies a numeric interval by which the field's value will be incremented or
 156      * decremented when the user invokes the spinner. Defaults to &lt;tt&gt;1&lt;/tt&gt;.
 157      */
 158     step: 1,
 159
 160 <span id='Ext-form-field-Number-cfg-minText'>    /**
 161 </span>     * @cfg {String} minText Error text to display if the minimum value validation fails (defaults to 'The minimum
 162      * value for this field is {minValue}')
 163      */
 164     minText : 'The minimum value for this field is {0}',
 165
 166 <span id='Ext-form-field-Number-cfg-maxText'>    /**
 167 </span>     * @cfg {String} maxText Error text to display if the maximum value validation fails (defaults to 'The maximum
 168      * value for this field is {maxValue}')
 169      */
 170     maxText : 'The maximum value for this field is {0}',
 171
 172 <span id='Ext-form-field-Number-cfg-nanText'>    /**
 173 </span>     * @cfg {String} nanText Error text to display if the value is not a valid number.  For example, this can happen
 174      * if a valid character like '.' or '-' is left in the field with no number (defaults to '{value} is not a valid number')
 175      */
 176     nanText : '{0} is not a valid number',
 177
 178 <span id='Ext-form-field-Number-cfg-negativeText'>    /**
 179 </span>     * @cfg {String} negativeText Error text to display if the value is negative and {@link #minValue} is set to
 180      * &lt;tt&gt;0&lt;/tt&gt;. This is used instead of the {@link #minText} in that circumstance only.
 181      */
 182     negativeText : 'The value cannot be negative',
 183
 184 <span id='Ext-form-field-Number-cfg-baseChars'>    /**
 185 </span>     * @cfg {String} baseChars The base set of characters to evaluate as valid numbers (defaults to '0123456789').
 186      */
 187     baseChars : '0123456789',
 188
 189 <span id='Ext-form-field-Number-cfg-autoStripChars'>    /**
 190 </span>     * @cfg {Boolean} autoStripChars True to automatically strip not allowed characters from the field. Defaults to &lt;tt&gt;false&lt;/tt&gt;
 191      */
 192     autoStripChars: false,
 193
 194     initComponent: function() {
 195         var me = this,
 196             allowed;
 197
 198         me.callParent();
 199
 200         me.setMinValue(me.minValue);
 201         me.setMaxValue(me.maxValue);
 202
 203         // Build regexes for masking and stripping based on the configured options
 204         if (me.disableKeyFilter !== true) {
 205             allowed = me.baseChars + '';
 206             if (me.allowDecimals) {
 207                 allowed += me.decimalSeparator;
 208             }
 209             if (me.minValue &lt; 0) {
 210                 allowed += '-';
 211             }
 212             allowed = Ext.String.escapeRegex(allowed);
 213             me.maskRe = new RegExp('[' + allowed + ']');
 214             if (me.autoStripChars) {
 215                 me.stripCharsRe = new RegExp('[^' + allowed + ']', 'gi');
 216             }
 217         }
 218     },
 219
 220 <span id='Ext-form-field-Number-method-getErrors'>    /**
 221 </span>     * Runs all of Number's validations and returns an array of any errors. Note that this first
 222      * runs Text's validations, so the returned array is an amalgamation of all field errors.
 223      * The additional validations run test that the value is a number, and that it is within the
 224      * configured min and max values.
 225      * @param {Mixed} value The value to get errors for (defaults to the current field value)
 226      * @return {Array} All validation errors for this field
 227      */
 228     getErrors: function(value) {
 229         var me = this,
 230             errors = me.callParent(arguments),
 231             format = Ext.String.format,
 232             num;
 233
 234         value = Ext.isDefined(value) ? value : this.processRawValue(this.getRawValue());
 235
 236         if (value.length &lt; 1) { // if it's blank and textfield didn't flag it then it's valid
 237              return errors;
 238         }
 239
 240         value = String(value).replace(me.decimalSeparator, '.');
 241
 242         if(isNaN(value)){
 243             errors.push(format(me.nanText, value));
 244         }
 245
 246         num = me.parseValue(value);
 247
 248         if (me.minValue === 0 &amp;&amp; num &lt; 0) {
 249             errors.push(this.negativeText);
 250         }
 251         else if (num &lt; me.minValue) {
 252             errors.push(format(me.minText, me.minValue));
 253         }
 254
 255         if (num &gt; me.maxValue) {
 256             errors.push(format(me.maxText, me.maxValue));
 257         }
 258
 259
 260         return errors;
 261     },
 262
 263     rawToValue: function(rawValue) {
 264         var value = this.fixPrecision(this.parseValue(rawValue));
 265         if (value === null) {
 266             value = rawValue || null;
 267         }
 268         return  value;
 269     },
 270
 271     valueToRaw: function(value) {
 272         var me = this,
 273             decimalSeparator = me.decimalSeparator;
 274         value = me.parseValue(value);
 275         value = me.fixPrecision(value);
 276         value = Ext.isNumber(value) ? value : parseFloat(String(value).replace(decimalSeparator, '.'));
 277         value = isNaN(value) ? '' : String(value).replace('.', decimalSeparator);
 278         return value;
 279     },
 280
 281     onChange: function() {
 282         var me = this,
 283             value = me.getValue(),
 284             valueIsNull = value === null;
 285
 286         me.callParent(arguments);
 287
 288         // Update the spinner buttons
 289         me.setSpinUpEnabled(valueIsNull || value &lt; me.maxValue);
 290         me.setSpinDownEnabled(valueIsNull || value &gt; me.minValue);
 291     },
 292
 293 <span id='Ext-form-field-Number-method-setMinValue'>    /**
 294 </span>     * Replaces any existing {@link #minValue} with the new value.
 295      * @param {Number} value The minimum value
 296      */
 297     setMinValue : function(value) {
 298         this.minValue = Ext.Number.from(value, Number.NEGATIVE_INFINITY);
 299     },
 300
 301 <span id='Ext-form-field-Number-method-setMaxValue'>    /**
 302 </span>     * Replaces any existing {@link #maxValue} with the new value.
 303      * @param {Number} value The maximum value
 304      */
 305     setMaxValue: function(value) {
 306         this.maxValue = Ext.Number.from(value, Number.MAX_VALUE);
 307     },
 308
 309     // private
 310     parseValue : function(value) {
 311         value = parseFloat(String(value).replace(this.decimalSeparator, '.'));
 312         return isNaN(value) ? null : value;
 313     },
 314
 315 <span id='Ext-form-field-Number-method-fixPrecision'>    /**
 316 </span>     * @private
 317      *
 318      */
 319     fixPrecision : function(value) {
 320         var me = this,
 321             nan = isNaN(value),
 322             precision = me.decimalPrecision;
 323
 324         if (nan || !value) {
 325             return nan ? '' : value;
 326         } else if (!me.allowDecimals || precision &lt;= 0) {
 327             precision = 0;
 328         }
 329
 330         return parseFloat(Ext.Number.toFixed(parseFloat(value), precision));
 331     },
 332
 333     beforeBlur : function() {
 334         var me = this,
 335             v = me.parseValue(me.getRawValue());
 336
 337         if (!Ext.isEmpty(v)) {
 338             me.setValue(v);
 339         }
 340     },
 341
 342     onSpinUp: function() {
 343         var me = this;
 344         if (!me.readOnly) {
 345             me.setValue(Ext.Number.constrain(me.getValue() + me.step, me.minValue, me.maxValue));
 346         }
 347     },
 348
 349     onSpinDown: function() {
 350         var me = this;
 351         if (!me.readOnly) {
 352             me.setValue(Ext.Number.constrain(me.getValue() - me.step, me.minValue, me.maxValue));
 353         }
 354     }
 355 });
 356 </pre>
 357 </body>
 358 </html>