projects / roojs1 / blob
? search:


b93e989bf6ca534f248c6461e715756c61e7d9d5
[roojs1] / docs / src / Roo_form_NumberField.js.html
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">/*
2  * Based on:
3  * Ext JS Library 1.1.1
4  * Copyright(c) 2006-2007, Ext JS, LLC.
5  *
6  * Originally Released Under LGPL - original licence link has changed is not relivant.
7  *
8  * Fork - LGPL
9  * &lt;script type=&quot;text/javascript&quot;&gt;
10  */
11
12
13 /**
14  * @class Roo.form.NumberField
15  * @extends Roo.form.TextField
16  * Numeric text field that provides automatic keystroke filtering and numeric validation.
17  * @constructor
18  * Creates a new NumberField
19  * @param {Object} config Configuration options
20  */
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">);
23 };
24
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 &quot;x-form-field x-form-num-field&quot;)
28      */
29     </span><span class="jsdoc-var">fieldClass</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-form-field x-form-num-field&quot;</span><span class="jsdoc-syntax">,
30     </span><span class="jsdoc-comment">/**
31      * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true)
32      */
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 '.')
36      */
37     </span><span class="jsdoc-var">decimalSeparator </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;.&quot;</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
40      */
41     </span><span class="jsdoc-var">thousandSeparator </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;&quot;</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)
44      */
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)
48      */
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)
52      */
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)
56      */
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 &quot;The minimum value for this field is {minValue}&quot;)
60      */
61     </span><span class="jsdoc-var">minText </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;The minimum value for this field is {0}&quot;</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 &quot;The maximum value for this field is {maxValue}&quot;)
64      */
65     </span><span class="jsdoc-var">maxText </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;The maximum value for this field is {0}&quot;</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 &quot;{value} is not a valid number&quot;)
69      */
70     </span><span class="jsdoc-var">nanText </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;{0} is not a valid number&quot;</span><span class="jsdoc-syntax">,
71
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">&quot;0123456789&quot;</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">;
78         }
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">&quot;-&quot;</span><span class="jsdoc-syntax">;
82         }
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">&amp;&amp; (</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">;
88             }
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">();
92             }
93         };
94         </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;keypress&quot;</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">);
95     },
96
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">;
101         }
102         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">value.length </span><span class="jsdoc-syntax">&lt; 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">;
104         }
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">;
109         }
110         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">num </span><span class="jsdoc-syntax">&lt; </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">;
113         }
114         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">num </span><span class="jsdoc-syntax">&gt; </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">;
117         }
118         </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
119     },
120
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">)));
123     },
124
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">&quot;.&quot;</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">;
129     },
130
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">;
136         }
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">);
138     },
139
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">&quot;.&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.decimalSeparator</span><span class="jsdoc-syntax">));
146     },
147
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">);
151     },
152
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">);
157         }
158     }
159 });</span></code></body></html>
RooJS - Version 1