src/widgets/form/NumberField.js

   1 /*!
   2  * Ext JS Library 3.1.0
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   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     // private
  83     validateValue : function(value){
  84         if(!Ext.form.NumberField.superclass.validateValue.call(this, value)){
  85             return false;
  86         }
  87         if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
  88              return true;
  89         }
  90         value = String(value).replace(this.decimalSeparator, ".");
  91         if(isNaN(value)){
  92             this.markInvalid(String.format(this.nanText, value));
  93             return false;
  94         }
  95         var num = this.parseValue(value);
  96         if(num < this.minValue){
  97             this.markInvalid(String.format(this.minText, this.minValue));
  98             return false;
  99         }
 100         if(num > this.maxValue){
 101             this.markInvalid(String.format(this.maxText, this.maxValue));
 102             return false;
 103         }
 104         return true;
 105     },
 106
 107     getValue : function(){
 108         return this.fixPrecision(this.parseValue(Ext.form.NumberField.superclass.getValue.call(this)));
 109     },
 110
 111     setValue : function(v){
 112         v = Ext.isNumber(v) ? v : parseFloat(String(v).replace(this.decimalSeparator, "."));
 113         v = isNaN(v) ? '' : String(v).replace(".", this.decimalSeparator);
 114         return Ext.form.NumberField.superclass.setValue.call(this, v);
 115     },
 116
 117     /**
 118      * Replaces any existing {@link #minValue} with the new value.
 119      * @param {Number} value The minimum value
 120      */
 121     setMinValue : function(value){
 122         this.minValue = Ext.num(value, Number.NEGATIVE_INFINITY);
 123     },
 124
 125     /**
 126      * Replaces any existing {@link #maxValue} with the new value.
 127      * @param {Number} value The maximum value
 128      */
 129     setMaxValue : function(value){
 130         this.maxValue = Ext.num(value, Number.MAX_VALUE);
 131     },
 132
 133     // private
 134     parseValue : function(value){
 135         value = parseFloat(String(value).replace(this.decimalSeparator, "."));
 136         return isNaN(value) ? '' : value;
 137     },
 138
 139     // private
 140     fixPrecision : function(value){
 141         var nan = isNaN(value);
 142         if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
 143            return nan ? '' : value;
 144         }
 145         return parseFloat(parseFloat(value).toFixed(this.decimalPrecision));
 146     },
 147
 148     beforeBlur : function(){
 149         var v = this.parseValue(this.getRawValue());
 150         if(!Ext.isEmpty(v)){
 151             this.setValue(this.fixPrecision(v));
 152         }
 153     }
 154 });
 155 Ext.reg('numberfield', Ext.form.NumberField);