1 <html><head><title>Roo/form/NumberField.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
14 * @class Roo.form.NumberField
15 * @extends Roo.form.TextField
16 * Numeric text field that provides automatic keystroke filtering and numeric validation.
18 * Creates a new NumberField
19 * @param {Object} config Configuration options
21 </span><span class="jsdoc-var">Roo.form.NumberField </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
22 </span><span class="jsdoc-var">Roo.form.NumberField.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
25 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.form.NumberField</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.form.TextField</span><span class="jsdoc-syntax">, {
26 </span><span class="jsdoc-comment">/**
27 * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field x-form-num-field")
29 </span><span class="jsdoc-var">fieldClass</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"x-form-field x-form-num-field"</span><span class="jsdoc-syntax">,
30 </span><span class="jsdoc-comment">/**
31 * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true)
33 </span><span class="jsdoc-var">allowDecimals </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
34 </span><span class="jsdoc-comment">/**
35 * @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.')
37 </span><span class="jsdoc-var">decimalSeparator </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"."</span><span class="jsdoc-syntax">,
38 </span><span class="jsdoc-comment">/**
39 * @cfg {String} thousandSeparator Character(s) to allow as the thousand separator (defaults to '') - set to ',' for example
41 </span><span class="jsdoc-var">thousandSeparator </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">""</span><span class="jsdoc-syntax">,
42 </span><span class="jsdoc-comment">/**
43 * @cfg {Number} decimalPrecision The maximum precision to display after the decimal separator (defaults to 2)
45 </span><span class="jsdoc-var">decimalPrecision </span><span class="jsdoc-syntax">: 2,
46 </span><span class="jsdoc-comment">/**
47 * @cfg {Boolean} allowNegative False to prevent entering a negative sign (defaults to true)
49 </span><span class="jsdoc-var">allowNegative </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
50 </span><span class="jsdoc-comment">/**
51 * @cfg {Number} minValue The minimum allowed value (defaults to Number.NEGATIVE_INFINITY)
53 </span><span class="jsdoc-var">minValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Number.NEGATIVE_INFINITY</span><span class="jsdoc-syntax">,
54 </span><span class="jsdoc-comment">/**
55 * @cfg {Number} maxValue The maximum allowed value (defaults to Number.MAX_VALUE)
57 </span><span class="jsdoc-var">maxValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Number.MAX_VALUE</span><span class="jsdoc-syntax">,
58 </span><span class="jsdoc-comment">/**
59 * @cfg {String} minText Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minValue}")
61 </span><span class="jsdoc-var">minText </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"The minimum value for this field is {0}"</span><span class="jsdoc-syntax">,
62 </span><span class="jsdoc-comment">/**
63 * @cfg {String} maxText Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxValue}")
65 </span><span class="jsdoc-var">maxText </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"The maximum value for this field is {0}"</span><span class="jsdoc-syntax">,
66 </span><span class="jsdoc-comment">/**
67 * @cfg {String} nanText Error text to display if the value is not a valid number. For example, this can happen
68 * if a valid character like '.' or '-' is left in the field with no number (defaults to "{value} is not a valid number")
70 </span><span class="jsdoc-var">nanText </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"{0} is not a valid number"</span><span class="jsdoc-syntax">,
72 </span><span class="jsdoc-comment">// private
73 </span><span class="jsdoc-var">initEvents </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
74 </span><span class="jsdoc-var">Roo.form.NumberField.superclass.initEvents.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
75 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">allowed </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"0123456789"</span><span class="jsdoc-syntax">;
76 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.allowDecimals</span><span class="jsdoc-syntax">){
77 </span><span class="jsdoc-var">allowed </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">this.decimalSeparator</span><span class="jsdoc-syntax">;
79 </span><span class="jsdoc-var">allowed </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">this.thousandSeparator</span><span class="jsdoc-syntax">;
80 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.allowNegative</span><span class="jsdoc-syntax">){
81 </span><span class="jsdoc-var">allowed </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">"-"</span><span class="jsdoc-syntax">;
83 </span><span class="jsdoc-var">this.stripCharsRe </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">RegExp</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'[^'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">allowed</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">']'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'gi'</span><span class="jsdoc-syntax">);
84 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">keyPress </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
85 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getKey</span><span class="jsdoc-syntax">();
86 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">Roo.isIE </span><span class="jsdoc-syntax">&& (</span><span class="jsdoc-var">e.isSpecialKey</span><span class="jsdoc-syntax">() || </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">e.BACKSPACE </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">e.DELETE</span><span class="jsdoc-syntax">)){
87 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
89 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getCharCode</span><span class="jsdoc-syntax">();
90 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">allowed.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">String.fromCharCode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">)) === -1){
91 </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
94 </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"keypress"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">keyPress</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
97 </span><span class="jsdoc-comment">// private
98 </span><span class="jsdoc-var">validateValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">){
99 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">Roo.form.NumberField.superclass.validateValue.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">)){
100 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
102 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">value.length </span><span class="jsdoc-syntax">< 1){ </span><span class="jsdoc-comment">// if it's blank and textfield didn't flag it then it's valid
103 </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
105 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">num </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.parseValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">);
106 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">isNaN</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">num</span><span class="jsdoc-syntax">)){
107 </span><span class="jsdoc-var">this.markInvalid</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">String.format</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.nanText</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">));
108 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
110 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">num </span><span class="jsdoc-syntax">< </span><span class="jsdoc-var">this.minValue</span><span class="jsdoc-syntax">){
111 </span><span class="jsdoc-var">this.markInvalid</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">String.format</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.minText</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.minValue</span><span class="jsdoc-syntax">));
112 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
114 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">num </span><span class="jsdoc-syntax">> </span><span class="jsdoc-var">this.maxValue</span><span class="jsdoc-syntax">){
115 </span><span class="jsdoc-var">this.markInvalid</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">String.format</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.maxText</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.maxValue</span><span class="jsdoc-syntax">));
116 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
118 </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
121 </span><span class="jsdoc-var">getValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
122 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.fixPrecision</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.parseValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.form.NumberField.superclass.getValue.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">)));
125 </span><span class="jsdoc-comment">// private
126 </span><span class="jsdoc-var">parseValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">){
127 </span><span class="jsdoc-var">value </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">parseFloat</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">String</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.decimalSeparator</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"."</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.thousandSeparator</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">));
128 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">isNaN</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-string">'' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">;
131 </span><span class="jsdoc-comment">// private
132 </span><span class="jsdoc-var">fixPrecision </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">){
133 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">nan </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">isNaN</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">);
134 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.allowDecimals </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.decimalPrecision </span><span class="jsdoc-syntax">== -1 || </span><span class="jsdoc-var">nan </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">){
135 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">nan </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">;
137 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">parseFloat</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.toFixed</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.decimalPrecision</span><span class="jsdoc-syntax">);
140 </span><span class="jsdoc-var">setValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">){
141 </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.fixPrecision</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">);
142 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.thousandSeparator </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">){
143 </span><span class="jsdoc-comment">// v = Roo.util.Format.number(v, this.decimalPrecision, this.thousandSeparator);
144 </span><span class="jsdoc-syntax">}
145 </span><span class="jsdoc-var">Roo.form.NumberField.superclass.setValue.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">String</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"."</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.decimalSeparator</span><span class="jsdoc-syntax">));
148 </span><span class="jsdoc-comment">// private
149 </span><span class="jsdoc-var">decimalPrecisionFcn </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">){
150 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">);
153 </span><span class="jsdoc-var">beforeBlur </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
154 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.parseValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getRawValue</span><span class="jsdoc-syntax">());
155 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">){
156 </span><span class="jsdoc-var">this.setValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">);
159 });</span></code></body></html>