/** * @class Ext.field.Text * @extend Ext.field.Input * @alternateClassName Ext.form.Text * @xtype textfield * * The text field is the basis for most of the input fields. It provides a baseline of shared * functionality such as input validation, standard events, state management and look * and feel. Typically we create text fields inside a form, like this: * * @example packages=[reactor] * import React, { Component } from 'react'; * import { FormPanel, Container, TextField, FieldSet } from '@extjs/ext-react'; * * export default class MyExample extends Component { * render() { * return ( * <Container layout="center"> * <FormPanel shadow> * <FieldSet title="Separate Label and Placeholder" margin="0 0 20 0"> * <TextField placeHolder="Enter Name..." label="Name" required/> * </FieldSet> * <FieldSet title="Label as Placeholder" margin="0 0 20 0" > * <TextField labelAlign="placeholder" label="Name" required/> * </FieldSet> * <FieldSet title="With Error Message"> * <TextField * labelAlign="placeholder" * label="Label" * errorMessage="The value you entered is invalid." * value="invalid value" * errorTarget="under" * /> * </FieldSet> * </FormPanel> * </Container> * ) * } * } */ /** * @event focus * Fires when this field receives input focus * @param {Ext.field.Text} this This field * @param {Ext.event.Event} e */ /** * @event blur * Fires when this field loses input focus * @param {Ext.field.Text} this This field * @param {Ext.event.Event} e */ /** * @event paste * Fires when this field is pasted. * @param {Ext.field.Text} this This field * @param {Ext.event.Event} e */ /** * @event mousedown * Fires when this field receives a mousedown * @param {Ext.field.Text} this This field * @param {Ext.event.Event} e */ /** * @event keyup * @preventable * Fires when a key is released on the input element * @param {Ext.field.Text} this This field * @param {Ext.event.Event} e */ /** * @event clearicontap * @preventable * Fires when the clear icon is tapped * @param {Ext.field.Text} this This field * @param {Ext.field.Input} input The field's input component. * @param {Ext.event.Event} e */ /** * @event change * Fires when the value has changed. * @param {Ext.field.Text} this This field * @param {String} newValue The new value * @param {String} oldValue The original value */ /** * @event action * @preventable * Fires whenever the return key or go is pressed. FormPanel listeners * for this event, and submits itself whenever it fires. Also note * that this event bubbles up to parent containers. * @param {Ext.field.Text} this This field * @param {Mixed} e The key event object */ /** * @cfg labelAlign * When value is `'placeholder'`, the label text will be rendered as placeholder * text inside the empty input and will animated to "top" alignment when the input * is focused or contains text. * @inheritdoc * @accessor */ /** * @cfg {String} [placeholder=null] * A string value displayed in the input when the control is empty. * * @accessor */ /** * @cfg {Number} [maxLength=null] * The maximum number of permitted input characters. * @accessor */ /** * @cfg {Boolean} [autoComplete=true] * True to set the field's DOM element autocomplete attribute to "on", false to set to "off". * * @accessor */ /** * @cfg {Boolean} [autoCapitalize=null] * True to set the field's DOM element auto=capitalize attribute to "on", false to set to "off". * @accessor */ /** * @cfg {Boolean} [autoCorrect=null] * True to set the field DOM element auto-correct attribute to "on", false to set to "off". * @accessor */ /** * @cfg {String} [pattern=null] * The value for the HTML5 `pattern` attribute. * You can use this to change which keyboard layout will be used. * * Even though it extends {@link Ext.field.Text}, it will display the number keyboard. * * @accessor */ /** * @cfg {Object} triggers * {@link Ext.field.trigger.Trigger Triggers} to use in this field. The keys in * this object are unique identifiers for the triggers. The values in this object * are {@link Ext.field.trigger.Trigger Trigger} configuration objects. * * The weight value may be a negative value in order to position custom triggers * ahead of default triggers like that of a DatePicker field. * * @accessor */ /** * @cfg {Boolean} [editable=true] * Configure as `false` to prevent the user from typing text directly into the field; * the field can only have its value set programmatically or via an action invoked by a trigger. * * Contrast with {@link #cfg!readOnly} which disables all mutation via the UI. * * @accessor */ /** * @cfg {'left'/'center'/'right'} [textAlign='left'] * The text alignment of this field. * * @accessor */ /** * @cfg {String/Ext.field.InputMask} [inputMask=null] * * Please review {@link Ext.field.InputMask} to see the provided * Character Sets and example usage. * * **Important:** To use this config you must require `Ext.field.InputMask` or * use a complete framework build. The logic to implement an `inputMask` is not * automatically included in a build. * @since 6.5.0 * @accessor */ /** * @cfg {Boolean} [autoHideInputMask=true] * Specify as `false` to always show the `inputMask`. * @since 6.5.0 * @accessor */ /** * @cfg {String} [badFormatMessage='Value does not match the required format'] * The error message that will be displayed if the value cannot be parsed (for some * derived types) or if the value does not match a configured {@link #inputMask}. * @locale * @since 6.5.0 */ /** * @cfg {Object} publishes * @inheritdoc */ /** * @cfg {Object} twoWayBindable * @inheritdoc */ /** * @cfg {Boolean} [animateUnderline=false] * 'true' to animate the underline of a field when focused * @accessor */ /** * @cfg {String} [placeholder=null] * A string value displayed in the input when the control is empty. * @accessor */ /** * @cfg {Boolean} [clearable=true] * `true` to show a clear trigger in this field when it has a non-empty value * @accessor */ /** * @cfg {String} [inputType='text'] * @inheritdoc */