source/widgets/form/NumberField.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 /**\r
  10  * @class Ext.form.NumberField\r
  11  * @extends Ext.form.TextField\r
  12  * Numeric text field that provides automatic keystroke filtering and numeric validation.\r
  13  * @constructor\r
  14  * Creates a new NumberField\r
  15  * @param {Object} config Configuration options\r
  16  */\r
  17 Ext.form.NumberField = Ext.extend(Ext.form.TextField,  {\r
  18     /**\r
  19      * @cfg {RegExp} stripCharsRe @hide\r
  20      */\r
  21     /**\r
  22      * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field x-form-num-field")\r
  23      */\r
  24     fieldClass: "x-form-field x-form-num-field",\r
  25     /**\r
  26      * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true)\r
  27      */\r
  28     allowDecimals : true,\r
  29     /**\r
  30      * @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.')\r
  31      */\r
  32     decimalSeparator : ".",\r
  33     /**\r
  34      * @cfg {Number} decimalPrecision The maximum precision to display after the decimal separator (defaults to 2)\r
  35      */\r
  36     decimalPrecision : 2,\r
  37     /**\r
  38      * @cfg {Boolean} allowNegative False to prevent entering a negative sign (defaults to true)\r
  39      */\r
  40     allowNegative : true,\r
  41     /**\r
  42      * @cfg {Number} minValue The minimum allowed value (defaults to Number.NEGATIVE_INFINITY)\r
  43      */\r
  44     minValue : Number.NEGATIVE_INFINITY,\r
  45     /**\r
  46      * @cfg {Number} maxValue The maximum allowed value (defaults to Number.MAX_VALUE)\r
  47      */\r
  48     maxValue : Number.MAX_VALUE,\r
  49     /**\r
  50      * @cfg {String} minText Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minValue}")\r
  51      */\r
  52     minText : "The minimum value for this field is {0}",\r
  53     /**\r
  54      * @cfg {String} maxText Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxValue}")\r
  55      */\r
  56     maxText : "The maximum value for this field is {0}",\r
  57     /**\r
  58      * @cfg {String} nanText Error text to display if the value is not a valid number.  For example, this can happen\r
  59      * if a valid character like '.' or '-' is left in the field with no number (defaults to "{value} is not a valid number")\r
  60      */\r
  61     nanText : "{0} is not a valid number",\r
  62     /**\r
  63      * @cfg {String} baseChars The base set of characters to evaluate as valid numbers (defaults to '0123456789').\r
  64      */\r
  65     baseChars : "0123456789",\r
  66 \r
  67     // private\r
  68     initEvents : function(){\r
  69         Ext.form.NumberField.superclass.initEvents.call(this);\r
  70         var allowed = this.baseChars+'';\r
  71         if(this.allowDecimals){\r
  72             allowed += this.decimalSeparator;\r
  73         }\r
  74         if(this.allowNegative){\r
  75             allowed += "-";\r
  76         }\r
  77         this.stripCharsRe = new RegExp('[^'+allowed+']', 'gi');\r
  78         var keyPress = function(e){\r
  79             var k = e.getKey();\r
  80             if(!Ext.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){\r
  81                 return;\r
  82             }\r
  83             var c = e.getCharCode();\r
  84             if(allowed.indexOf(String.fromCharCode(c)) === -1){\r
  85                 e.stopEvent();\r
  86             }\r
  87         };\r
  88         this.el.on("keypress", keyPress, this);\r
  89     },\r
  90 \r
  91     // private\r
  92     validateValue : function(value){\r
  93         if(!Ext.form.NumberField.superclass.validateValue.call(this, value)){\r
  94             return false;\r
  95         }\r
  96         if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid\r
  97              return true;\r
  98         }\r
  99         value = String(value).replace(this.decimalSeparator, ".");\r
 100         if(isNaN(value)){\r
 101             this.markInvalid(String.format(this.nanText, value));\r
 102             return false;\r
 103         }\r
 104         var num = this.parseValue(value);\r
 105         if(num < this.minValue){\r
 106             this.markInvalid(String.format(this.minText, this.minValue));\r
 107             return false;\r
 108         }\r
 109         if(num > this.maxValue){\r
 110             this.markInvalid(String.format(this.maxText, this.maxValue));\r
 111             return false;\r
 112         }\r
 113         return true;\r
 114     },\r
 115 \r
 116     getValue : function(){\r
 117         return this.fixPrecision(this.parseValue(Ext.form.NumberField.superclass.getValue.call(this)));\r
 118     },\r
 119 \r
 120     setValue : function(v){\r
 121         v = typeof v == 'number' ? v : parseFloat(String(v).replace(this.decimalSeparator, "."));\r
 122         v = isNaN(v) ? '' : String(v).replace(".", this.decimalSeparator);\r
 123         Ext.form.NumberField.superclass.setValue.call(this, v);\r
 124     },\r
 125 \r
 126     // private\r
 127     parseValue : function(value){\r
 128         value = parseFloat(String(value).replace(this.decimalSeparator, "."));\r
 129         return isNaN(value) ? '' : value;\r
 130     },\r
 131 \r
 132     // private\r
 133     fixPrecision : function(value){\r
 134         var nan = isNaN(value);\r
 135         if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){\r
 136            return nan ? '' : value;\r
 137         }\r
 138         return parseFloat(parseFloat(value).toFixed(this.decimalPrecision));\r
 139     },\r
 140 \r
 141     beforeBlur : function(){\r
 142         var v = this.parseValue(this.getRawValue());\r
 143         if(v || v === 0){\r
 144             this.setValue(this.fixPrecision(v));\r
 145         }\r
 146     }\r
 147 });\r
 148 Ext.reg('numberfield', Ext.form.NumberField);