2 * @class Ext.form.field.Number
3 * @extends Ext.form.field.Spinner
5 A numeric text field that provides automatic keystroke filtering to disallow non-numeric characters,
6 and numeric validation to limit the value to a range of valid numbers. The range of acceptable number
7 values can be controlled by setting the {@link #minValue} and {@link #maxValue} configs, and fractional
8 decimals can be disallowed by setting {@link #allowDecimals} to `false`.
10 By default, the number field is also rendered with a set of up/down spinner buttons and has
11 up/down arrow key and mouse wheel event listeners attached for incrementing/decrementing the value by the
12 {@link #step} value. To hide the spinner buttons set `{@link #hideTrigger hideTrigger}:true`; to disable the arrow key
13 and mouse wheel handlers set `{@link #keyNavEnabled keyNavEnabled}:false` and
14 `{@link #mouseWheelEnabled mouseWheelEnabled}:false`. See the example below.
17 {@img Ext.form.Number/Ext.form.Number1.png Ext.form.Number component}
18 Ext.create('Ext.form.Panel', {
22 renderTo: Ext.getBody(),
27 fieldLabel: 'Bottles of Beer',
33 text: 'Take one down, pass it around',
35 this.up('form').down('[name=bottles]').spinDown();
40 #Removing UI Enhancements#
41 {@img Ext.form.Number/Ext.form.Number2.png Ext.form.Number component}
42 Ext.create('Ext.form.Panel', {
43 title: 'Personal Info',
46 renderTo: Ext.getBody(),
52 minValue: 0, //prevents negative numbers
54 // Remove spinner buttons, and arrow key and mouse wheel listeners
57 mouseWheelEnabled: false
62 Ext.create('Ext.form.Panel', {
63 renderTo: Ext.getBody(),
71 fieldLabel: 'Even Numbers',
73 // Set step so it skips every other number
77 // Add change handler to force user-entered numbers to evens
79 change: function(field, value) {
80 value = parseInt(value, 10);
81 field.setValue(value + value % 2);
89 * Creates a new Number field
90 * @param {Object} config Configuration options
94 * @docauthor Jason Johnston <jason@sencha.com>
96 Ext.define('Ext.form.field.Number', {
97 extend:'Ext.form.field.Spinner',
98 alias: 'widget.numberfield',
99 alternateClassName: ['Ext.form.NumberField', 'Ext.form.Number'],
102 * @cfg {RegExp} stripCharsRe @hide
105 * @cfg {RegExp} maskRe @hide
109 * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true)
111 allowDecimals : true,
114 * @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.')
116 decimalSeparator : '.',
119 * @cfg {Number} decimalPrecision The maximum precision to display after the decimal separator (defaults to 2)
121 decimalPrecision : 2,
124 * @cfg {Number} minValue The minimum allowed value (defaults to Number.NEGATIVE_INFINITY). Will be used by
125 * the field's validation logic, and for
126 * {@link Ext.form.field.Spinner#setSpinUpEnabled enabling/disabling the down spinner button}.
128 minValue: Number.NEGATIVE_INFINITY,
131 * @cfg {Number} maxValue The maximum allowed value (defaults to Number.MAX_VALUE). Will be used by
132 * the field's validation logic, and for
133 * {@link Ext.form.field.Spinner#setSpinUpEnabled enabling/disabling the up spinner button}.
135 maxValue: Number.MAX_VALUE,
138 * @cfg {Number} step Specifies a numeric interval by which the field's value will be incremented or
139 * decremented when the user invokes the spinner. Defaults to <tt>1</tt>.
144 * @cfg {String} minText Error text to display if the minimum value validation fails (defaults to 'The minimum
145 * value for this field is {minValue}')
147 minText : 'The minimum value for this field is {0}',
150 * @cfg {String} maxText Error text to display if the maximum value validation fails (defaults to 'The maximum
151 * value for this field is {maxValue}')
153 maxText : 'The maximum value for this field is {0}',
156 * @cfg {String} nanText Error text to display if the value is not a valid number. For example, this can happen
157 * if a valid character like '.' or '-' is left in the field with no number (defaults to '{value} is not a valid number')
159 nanText : '{0} is not a valid number',
162 * @cfg {String} negativeText Error text to display if the value is negative and {@link #minValue} is set to
163 * <tt>0</tt>. This is used instead of the {@link #minText} in that circumstance only.
165 negativeText : 'The value cannot be negative',
168 * @cfg {String} baseChars The base set of characters to evaluate as valid numbers (defaults to '0123456789').
170 baseChars : '0123456789',
173 * @cfg {Boolean} autoStripChars True to automatically strip not allowed characters from the field. Defaults to <tt>false</tt>
175 autoStripChars: false,
177 initComponent: function() {
183 me.setMinValue(me.minValue);
184 me.setMaxValue(me.maxValue);
186 // Build regexes for masking and stripping based on the configured options
187 if (me.disableKeyFilter !== true) {
188 allowed = me.baseChars + '';
189 if (me.allowDecimals) {
190 allowed += me.decimalSeparator;
192 if (me.minValue < 0) {
195 allowed = Ext.String.escapeRegex(allowed);
196 me.maskRe = new RegExp('[' + allowed + ']');
197 if (me.autoStripChars) {
198 me.stripCharsRe = new RegExp('[^' + allowed + ']', 'gi');
204 * Runs all of Number's validations and returns an array of any errors. Note that this first
205 * runs Text's validations, so the returned array is an amalgamation of all field errors.
206 * The additional validations run test that the value is a number, and that it is within the
207 * configured min and max values.
208 * @param {Mixed} value The value to get errors for (defaults to the current field value)
209 * @return {Array} All validation errors for this field
211 getErrors: function(value) {
213 errors = me.callParent(arguments),
214 format = Ext.String.format,
217 value = Ext.isDefined(value) ? value : this.processRawValue(this.getRawValue());
219 if (value.length < 1) { // if it's blank and textfield didn't flag it then it's valid
223 value = String(value).replace(me.decimalSeparator, '.');
226 errors.push(format(me.nanText, value));
229 num = me.parseValue(value);
231 if (me.minValue === 0 && num < 0) {
232 errors.push(this.negativeText);
234 else if (num < me.minValue) {
235 errors.push(format(me.minText, me.minValue));
238 if (num > me.maxValue) {
239 errors.push(format(me.maxText, me.maxValue));
246 rawToValue: function(rawValue) {
247 return this.fixPrecision(this.parseValue(rawValue)) || rawValue || null;
250 valueToRaw: function(value) {
252 decimalSeparator = me.decimalSeparator;
253 value = me.parseValue(value);
254 value = me.fixPrecision(value);
255 value = Ext.isNumber(value) ? value : parseFloat(String(value).replace(decimalSeparator, '.'));
256 value = isNaN(value) ? '' : String(value).replace('.', decimalSeparator);
260 onChange: function() {
262 value = me.getValue(),
263 valueIsNull = value === null;
265 me.callParent(arguments);
267 // Update the spinner buttons
268 me.setSpinUpEnabled(valueIsNull || value < me.maxValue);
269 me.setSpinDownEnabled(valueIsNull || value > me.minValue);
273 * Replaces any existing {@link #minValue} with the new value.
274 * @param {Number} value The minimum value
276 setMinValue : function(value) {
277 this.minValue = Ext.Number.from(value, Number.NEGATIVE_INFINITY);
281 * Replaces any existing {@link #maxValue} with the new value.
282 * @param {Number} value The maximum value
284 setMaxValue: function(value) {
285 this.maxValue = Ext.Number.from(value, Number.MAX_VALUE);
289 parseValue : function(value) {
290 value = parseFloat(String(value).replace(this.decimalSeparator, '.'));
291 return isNaN(value) ? null : value;
298 fixPrecision : function(value) {
301 precision = me.decimalPrecision;
304 return nan ? '' : value;
305 } else if (!me.allowDecimals || precision <= 0) {
309 return parseFloat(Ext.Number.toFixed(parseFloat(value), precision));
312 beforeBlur : function() {
314 v = me.parseValue(me.getRawValue());
316 if (!Ext.isEmpty(v)) {
321 onSpinUp: function() {
324 me.setValue(Ext.Number.constrain(me.getValue() + me.step, me.minValue, me.maxValue));
328 onSpinDown: function() {
331 me.setValue(Ext.Number.constrain(me.getValue() - me.step, me.minValue, me.maxValue));