/** * @class Ext.field.Number * @extend Ext.field.Text * @alternateClassName Ext.form.Number * @xtype numberfield * * The Number field creates an HTML5 number input and is usually created inside a form. Because it creates an HTML * number input field, most browsers will show a specialized virtual keyboard for entering numbers. The Number field * only accepts numerical input and also provides additional spinner UI that increases or decreases the current value * by a configured {@link #stepValue step value}. Here's how we might use one in a form: * * @example packages=[reactor] * import React, { Component } from 'react'; * import { Container, NumberField, FormPanel } from '@extjs/ext-react'; * * export default class MyExample extends Component { * render() { * return ( * <Container layout="center"> * <FormPanel shadow> * <NumberField * label="Number" * width="150" * /> * </FormPanel> * </Container> * ) * } * } * * ## minValue, maxValue and stepValue * * The {@link #minValue} and {@link #maxValue} props are self-explanatory and simply constrain the value * entered to the range specified by the configured min and max values. The other option exposed by this component * is {@link #stepValue}, which enables you to set how much the value changes every time the up and down spinners * are tapped on. * * Because number field inherits from {@link Ext.field.Text textfield} it gains all of the functionality that text * fields provide, including getting and setting the value at runtime, validations and various events that are fired as * the user interacts with the component. Check out the {@link Ext.field.Text} docs to see the additional functionality * available. */ /** * @cfg {Number} [minValue=null] The minimum value that this Number field can accept * (defaults to `undefined`, e.g. no minimum). * @accessor */ /** * @cfg {Number} [maxValue=null] The maximum value that this Number field can accept * (defaults to `undefined`, e.g. no maximum). * @accessor */ /** * @cfg {Number} [decimals=2] * The maximum precision to display after the decimal separator. * @locale * @accessor */ /** * @cfg {String} [decimalsText='The maximum decimal places is {0}'] * The error message that will be displayed if the field's value has incorrect number of * decimal places. * @Locale * @since 6.5.1 */ /** * @cfg {String} inputType * For desktop environments, an input of `type=text` is used and a rich user experience * is provided for numeric entry. For mobile environments, an input of `type=number` is * used and basic validation is performed on keystroke and `minValue` and `maxValue` * clamping is only done on blur or `setValue` if the field is not focused. * * If you specify `inputType` of `'text'`, the text input will be used on all devices * at the expense of numeric input keyboard on non-iOS devices. Alternatively, you may * specify an `inputType` of `'tel'` which will bring up the phone number input * keyboard, which isn't as ideal as the numeric keyboard. */ /** * @cfg {String} [minValueText='The minimum value for this field is {0}'] * The error message that will be displayed if the field's value is less than minValue * @Locale * @since 6.5.1 */ /** * @cfg {String} [maxValueText='The maximum value for this field is {0}'] * The error message that will be displayed if the field's value is greater than maxValue. * @Locale * @since 6.5.1 */ /** * @cfg {Boolean} [trim=true] * `false` to always show zeros when formatting the number * @accessor */