src/widgets/form/NumberField.js

   1 /*!
   2  * Ext JS Library 3.2.1
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**
   8  * @class Ext.form.NumberField
   9  * @extends Ext.form.TextField
  10  * Numeric text field that provides automatic keystroke filtering and numeric validation.
  11  * @constructor
  12  * Creates a new NumberField
  13  * @param {Object} config Configuration options
  14  * @xtype numberfield
  15  */
  16 Ext.form.NumberField = Ext.extend(Ext.form.TextField,  {
  17     /**
  18      * @cfg {RegExp} stripCharsRe @hide
  19      */
  20     /**
  21      * @cfg {RegExp} maskRe @hide
  22      */
  23     /**
  24      * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field x-form-num-field")
  25      */
  26     fieldClass: "x-form-field x-form-num-field",
  27     /**
  28      * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true)
  29      */
  30     allowDecimals : true,
  31     /**
  32      * @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.')
  33      */
  34     decimalSeparator : ".",
  35     /**
  36      * @cfg {Number} decimalPrecision The maximum precision to display after the decimal separator (defaults to 2)
  37      */
  38     decimalPrecision : 2,
  39     /**
  40      * @cfg {Boolean} allowNegative False to prevent entering a negative sign (defaults to true)
  41      */
  42     allowNegative : true,
  43     /**
  44      * @cfg {Number} minValue The minimum allowed value (defaults to Number.NEGATIVE_INFINITY)
  45      */
  46     minValue : Number.NEGATIVE_INFINITY,
  47     /**
  48      * @cfg {Number} maxValue The maximum allowed value (defaults to Number.MAX_VALUE)
  49      */
  50     maxValue : Number.MAX_VALUE,
  51     /**
  52      * @cfg {String} minText Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minValue}")
  53      */
  54     minText : "The minimum value for this field is {0}",
  55     /**
  56      * @cfg {String} maxText Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxValue}")
  57      */
  58     maxText : "The maximum value for this field is {0}",
  59     /**
  60      * @cfg {String} nanText Error text to display if the value is not a valid number.  For example, this can happen
  61      * if a valid character like '.' or '-' is left in the field with no number (defaults to "{value} is not a valid number")
  62      */
  63     nanText : "{0} is not a valid number",
  64     /**
  65      * @cfg {String} baseChars The base set of characters to evaluate as valid numbers (defaults to '0123456789').
  66      */
  67     baseChars : "0123456789",
  68
  69     // private
  70     initEvents : function(){
  71         var allowed = this.baseChars + '';
  72         if (this.allowDecimals) {
  73             allowed += this.decimalSeparator;
  74         }
  75         if (this.allowNegative) {
  76             allowed += '-';
  77         }
  78         this.maskRe = new RegExp('[' + Ext.escapeRe(allowed) + ']');
  79         Ext.form.NumberField.superclass.initEvents.call(this);
  80     },
  81
  82     /**
  83      * Runs all of NumberFields validations and returns an array of any errors. Note that this first
  84      * runs TextField's validations, so the returned array is an amalgamation of all field errors.
  85      * The additional validations run test that the value is a number, and that it is within the
  86      * configured min and max values.
  87      * @param {Mixed} value The value to get errors for (defaults to the current field value)
  88      * @return {Array} All validation errors for this field
  89      */
  90     getErrors: function(value) {
  91         var errors = Ext.form.NumberField.superclass.getErrors.apply(this, arguments);
  92
  93         value = value || this.processValue(this.getRawValue());
  94
  95         if (value.length < 1) { // if it's blank and textfield didn't flag it then it's valid
  96              return errors;
  97         }
  98
  99         value = String(value).replace(this.decimalSeparator, ".");
 100
 101         if(isNaN(value)){
 102             errors.push(String.format(this.nanText, value));
 103         }
 104
 105         var num = this.parseValue(value);
 106
 107         if(num < this.minValue){
 108             errors.push(String.format(this.minText, this.minValue));
 109         }
 110
 111         if(num > this.maxValue){
 112             errors.push(String.format(this.maxText, this.maxValue));
 113         }
 114
 115         return errors;
 116     },
 117
 118     getValue : function(){
 119         return this.fixPrecision(this.parseValue(Ext.form.NumberField.superclass.getValue.call(this)));
 120     },
 121
 122     setValue : function(v){
 123         v = Ext.isNumber(v) ? v : parseFloat(String(v).replace(this.decimalSeparator, "."));
 124         v = isNaN(v) ? '' : String(v).replace(".", this.decimalSeparator);
 125         return Ext.form.NumberField.superclass.setValue.call(this, v);
 126     },
 127
 128     /**
 129      * Replaces any existing {@link #minValue} with the new value.
 130      * @param {Number} value The minimum value
 131      */
 132     setMinValue : function(value){
 133         this.minValue = Ext.num(value, Number.NEGATIVE_INFINITY);
 134     },
 135
 136     /**
 137      * Replaces any existing {@link #maxValue} with the new value.
 138      * @param {Number} value The maximum value
 139      */
 140     setMaxValue : function(value){
 141         this.maxValue = Ext.num(value, Number.MAX_VALUE);
 142     },
 143
 144     // private
 145     parseValue : function(value){
 146         value = parseFloat(String(value).replace(this.decimalSeparator, "."));
 147         return isNaN(value) ? '' : value;
 148     },
 149
 150     // private
 151     fixPrecision : function(value){
 152         var nan = isNaN(value);
 153         if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
 154            return nan ? '' : value;
 155         }
 156         return parseFloat(parseFloat(value).toFixed(this.decimalPrecision));
 157     },
 158
 159     beforeBlur : function(){
 160         var v = this.parseValue(this.getRawValue());
 161         if(!Ext.isEmpty(v)){
 162             this.setValue(this.fixPrecision(v));
 163         }
 164     }
 165 });
 166 Ext.reg('numberfield', Ext.form.NumberField);