/** * A numeric text field that provides automatic keystroke filtering to disallow non-numeric * characters, and numeric validation to limit the value to a range of valid numbers. The range * of acceptable number values can be controlled by setting the {@link #minValue} and * {@link #maxValue} configs, and fractional decimals can be disallowed by setting * {@link #allowDecimals} to `false`. * * By default, the number field is also rendered with a set of up/down spinner buttons and has * up/down arrow key and mouse wheel event listeners attached for incrementing/decrementing * the value by the {@link #step} value. To hide the spinner buttons set * `{@link #hideTrigger hideTrigger}:true`; to disable the arrow key and mouse wheel handlers set * `{@link #keyNavEnabled keyNavEnabled}:false` and * `{@link #mouseWheelEnabled mouseWheelEnabled}:false`. See the example below. * * # Example usage * * @example * Ext.create('Ext.form.Panel', { * title: 'On The Wall', * width: 300, * bodyPadding: 10, * renderTo: Ext.getBody(), * items: [{ * xtype: 'numberfield', * anchor: '100%', * name: 'bottles', * fieldLabel: 'Bottles of Beer', * value: 99, * maxValue: 99, * minValue: 0 * }], * buttons: [{ * text: 'Take one down, pass it around', * handler: function() { * this.up('form').down('[name=bottles]').spinDown(); * } * }] * }); * * # Removing UI Enhancements * * @example * Ext.create('Ext.form.Panel', { * title: 'Personal Info', * width: 300, * bodyPadding: 10, * renderTo: Ext.getBody(), * items: [{ * xtype: 'numberfield', * anchor: '100%', * name: 'age', * fieldLabel: 'Age', * minValue: 0, //prevents negative numbers * * // Remove spinner buttons, and arrow key and mouse wheel listeners * hideTrigger: true, * keyNavEnabled: false, * mouseWheelEnabled: false * }] * }); * * # Using Step * * @example * Ext.create('Ext.form.Panel', { * renderTo: Ext.getBody(), * title: 'Step', * width: 300, * bodyPadding: 10, * items: [{ * xtype: 'numberfield', * anchor: '100%', * name: 'evens', * fieldLabel: 'Even Numbers', * * // Set step so it skips every other number * step: 2, * value: 0, * * // Add change handler to force user-entered numbers to evens * listeners: { * change: function(field, value) { * value = parseInt(value, 10); * field.setValue(value + value % 2); * } * } * }] * }); */Ext.define('Ext.form.field.Number', { extend: 'Ext.form.field.Spinner', alias: 'widget.numberfield', alternateClassName: ['Ext.form.NumberField', 'Ext.form.Number'], /** * @cfg {RegExp} stripCharsRe * @private */ /** * @cfg {RegExp} maskRe * @private */ /** * @cfg {Boolean} [allowExponential=true] * Set to `false` to disallow Exponential number notation */ allowExponential: true, /** * @cfg {Boolean} [allowDecimals=true] * False to disallow decimal values */ allowDecimals: true, /** * @cfg {String} decimalSeparator * Character(s) to allow as the decimal separator. * Defaults to {@link Ext.util.Format#decimalSeparator decimalSeparator}. * @locale */ decimalSeparator: null, /** * @cfg {Boolean} [submitLocaleSeparator=true] * False to ensure that the {@link #getSubmitValue} method strips * always uses `.` as the separator, regardless of the {@link #decimalSeparator} * configuration. * @locale */ submitLocaleSeparator: true, /** * @cfg {Number} decimalPrecision * The maximum precision to display after the decimal separator * @locale */ decimalPrecision: 2, /** * @cfg {Number} minValue * The minimum allowed value. Will be used by the field's validation logic, * and for {@link Ext.form.field.Spinner#setSpinUpEnabled enabling/disabling * the down spinner button}. * * Defaults to Number.NEGATIVE_INFINITY. */ minValue: Number.NEGATIVE_INFINITY, /** * @cfg {Number} maxValue * The maximum allowed value. Will be used by the field's validation logic, and for * {@link Ext.form.field.Spinner#setSpinUpEnabled enabling/disabling the up spinner button}. * * Defaults to Number.MAX_VALUE. */ maxValue: Number.MAX_VALUE, /** * @cfg {Number} step * Specifies a numeric interval by which the field's value will be incremented or decremented * when the user invokes the spinner. */ step: 1, /** * @cfg {String} minText * Error text to display if the minimum value validation fails. * @locale */ minText: 'The minimum value for this field is {0}', /** * @cfg {String} maxText * Error text to display if the maximum value validation fails. * @locale */ maxText: 'The maximum value for this field is {0}', /** * @cfg {String} nanText * Error text to display if the value is not a valid number. For example, this can happen * if a valid character like '.' or '-' is left in the field with no number. * @locale */ nanText: '{0} is not a valid number', /** * @cfg {String} negativeText * Error text to display if the value is negative and {@link #minValue} is set to 0. * This is used instead of the {@link #minText} in that circumstance only. * @locale */ negativeText: 'The value cannot be negative', /** * @cfg {String} baseChars * The base set of characters to evaluate as valid numbers. */ baseChars: '0123456789', /** * @cfg {Boolean} autoStripChars * True to automatically strip not allowed characters from the field. */ autoStripChars: false, initComponent: function() { var me = this; if (me.decimalSeparator === null) { me.decimalSeparator = Ext.util.Format.decimalSeparator; } me.callParent(); me.setMinValue(me.minValue); me.setMaxValue(me.maxValue); }, getSubTplData: function(fieldData) { var me = this, min = me.minValue, max = me.maxValue, data, inputElAttr, value; data = me.callParent([fieldData]); inputElAttr = data.inputElAriaAttributes; if (inputElAttr) { // The checks are to skip the default min and max values, // in which case we don't want to set corresponding ARIA // attributes at all if (min > Number.NEGATIVE_INFINITY) { inputElAttr['aria-valuemin'] = min; } if (max < Number.MAX_VALUE) { inputElAttr['aria-valuemax'] = max; } value = me.getValue(); if (value != null && value >= min && value <= max) { inputElAttr['aria-valuenow'] = value; } } return data; }, setValue: function(value) { var me = this, bind, valueBind; // This portion of the code is to prevent a binding from stomping over // the typed value. Say we have decimalPrecision 4 and the user types // 1.23456. The value of the field will be set as 1.2346 and published to // the viewmodel, which will trigger the binding to fire and setValue to // be called on the field, which would then set the value (and rawValue) to // 1.2346. Instead, if we have focus and the value is the same, just leave // the rawValue alone if (me.hasFocus) { bind = me.getBind(); valueBind = bind && bind.value; if (valueBind && valueBind.syncing && value === me.value) { return me; } } return me.callParent([value]); }, /** * Runs all of Number's validations and returns an array of any errors. Note that this first * runs Text's validations, so the returned array is an amalgamation of all field errors. * The additional validations run test that the value is a number, and that it is within * the configured min and max values. * @param {Object} [value] The value to get errors for (defaults to the current field value) * @return {String[]} All validation errors for this field */ getErrors: function(value) { value = arguments.length > 0 ? value : this.processRawValue(this.getRawValue()); // eslint-disable-next-line vars-on-top var me = this, errors = me.callParent([value]), format = Ext.String.format, num; if (value.length < 1) { // if it's blank and textfield didn't flag it then it's valid return errors; } value = String(value).replace(me.decimalSeparator, '.'); if (isNaN(value)) { errors.push(format(me.nanText, value)); } num = me.parseValue(value); if (me.minValue === 0 && num < 0) { errors.push(this.negativeText); } else if (num < me.minValue) { errors.push(format(me.minText, me.minValue)); } if (num > me.maxValue) { errors.push(format(me.maxText, me.maxValue)); } return errors; }, rawToValue: function(rawValue) { var value = this.fixPrecision(this.parseValue(rawValue)); if (value === null) { value = rawValue || null; } return value; }, valueToRaw: function(value) { var me = this, decimalSeparator = me.decimalSeparator; value = me.parseValue(value); value = me.fixPrecision(value); value = Ext.isNumber(value) ? value : parseFloat(String(value).replace(decimalSeparator, '.')); value = isNaN(value) ? '' : String(value).replace('.', decimalSeparator); return value; }, getSubmitValue: function() { var me = this, value = me.callParent(); if (!me.submitLocaleSeparator) { value = value.replace(me.decimalSeparator, '.'); } return value; }, onChange: function(newValue) { var ariaDom = this.ariaEl.dom; this.toggleSpinners(); this.callParent(arguments); if (ariaDom) { if (Ext.isNumber(newValue) && isFinite(newValue)) { ariaDom.setAttribute('aria-valuenow', newValue); } else { ariaDom.removeAttribute('aria-valuenow'); } } }, toggleSpinners: function() { var me = this, value = me.getValue(), valueIsNull = value === null, enabled; // If it's disabled, only allow it to be re-enabled if we are // the ones who are disabling it. if (me.spinUpEnabled || me.spinUpDisabledByToggle) { enabled = valueIsNull || value < me.maxValue; me.setSpinUpEnabled(enabled, true); } if (me.spinDownEnabled || me.spinDownDisabledByToggle) { enabled = valueIsNull || value > me.minValue; me.setSpinDownEnabled(enabled, true); } }, /** * Replaces any existing {@link #minValue} with the new value. * @param {Number} value The minimum value */ setMinValue: function(value) { var me = this, ariaDom = me.ariaEl.dom, minValue, allowed; me.minValue = minValue = Ext.Number.from(value, Number.NEGATIVE_INFINITY); me.toggleSpinners(); // May not be rendered yet if (ariaDom) { if (minValue > Number.NEGATIVE_INFINITY) { ariaDom.setAttribute('aria-valuemin', minValue); } else { ariaDom.removeAttribute('aria-valuemin'); } } // Build regexes for masking and stripping based on the configured options if (me.disableKeyFilter !== true) { allowed = me.baseChars + ''; if (me.allowExponential) { allowed += me.decimalSeparator + 'e+-'; } else { if (me.allowDecimals) { allowed += me.decimalSeparator; } if (me.minValue < 0) { allowed += '-'; } } allowed = Ext.String.escapeRegex(allowed); me.maskRe = new RegExp('[' + allowed + ']'); if (me.autoStripChars) { me.stripCharsRe = new RegExp('[^' + allowed + ']', 'gi'); } } }, /** * Replaces any existing {@link #maxValue} with the new value. * @param {Number} value The maximum value */ setMaxValue: function(value) { var ariaDom = this.ariaEl.dom, maxValue; this.maxValue = maxValue = Ext.Number.from(value, Number.MAX_VALUE); // May not be rendered yet if (ariaDom) { if (maxValue < Number.MAX_VALUE) { ariaDom.setAttribute('aria-valuemax', maxValue); } else { ariaDom.removeAttribute('aria-valuemax'); } } this.toggleSpinners(); }, /** * @private */ parseValue: function(value) { value = parseFloat(String(value).replace(this.decimalSeparator, '.')); return isNaN(value) ? null : value; }, /** * @private */ fixPrecision: function(value) { var me = this, nan = isNaN(value), precision = me.decimalPrecision; if (nan || !value) { return nan ? '' : value; } else if (!me.allowDecimals || precision <= 0) { precision = 0; } return parseFloat(Ext.Number.toFixed(parseFloat(value), precision)); }, onBlur: function(e) { var me = this, v = me.rawToValue(me.getRawValue()); if (!Ext.isEmpty(v)) { me.setValue(v); } me.callParent([e]); }, setSpinUpEnabled: function(enabled, internal) { this.callParent(arguments); if (!internal) { delete this.spinUpDisabledByToggle; } else { this.spinUpDisabledByToggle = !enabled; } }, onSpinUp: function() { var me = this; if (!me.readOnly) { me.setSpinValue( Ext.Number.constrain(me.getValue() + me.step, me.minValue, me.maxValue) ); } }, setSpinDownEnabled: function(enabled, internal) { this.callParent(arguments); if (!internal) { delete this.spinDownDisabledByToggle; } else { this.spinDownDisabledByToggle = !enabled; } }, onSpinDown: function() { var me = this; if (!me.readOnly) { me.setSpinValue( Ext.Number.constrain(me.getValue() - me.step, me.minValue, me.maxValue) ); } }, setSpinValue: function(value) { var me = this; if (me.enforceMaxLength) { // We need to round the value here, otherwise we could end up with a // very long number (think 0.1 + 0.2) if (me.fixPrecision(value).toString().length > me.maxLength) { return; } } me.setValue(value); }});