/**
 * @class Ext.field.Text
 * @extend Ext.field.Field
 * @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 {Boolean} [clearIcon=true]
 * `true` to use a clear icon in this field.
 * @accessor
 */
 
/**
 * @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=null]
 * 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 {Boolean} [readOnly=null]
 * True to set the field DOM element readonly attribute to true.
 * @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=null]
 * The text alignment of this field.
 *
 * @accessor
 */