A basic text field. Can be used as a direct replacement for traditional text inputs, or as the base class for more sophisticated input controls (like Ext.form.field.TextArea and Ext.form.field.ComboBox). Has support for empty-field placeholder values (see emptyText).

Validation

The Text field has a useful set of validations built in:

• allowBlank for making the field required
• minLength for requiring a minimum value length
• maxLength for setting a maximum value length (with enforceMaxLength to add it as the maxlength attribute on the input element)
• regex to specify a custom regular expression for validation

In addition, custom validations may be added:

• vtype specifies a virtual type implementation from Ext.form.field.VTypes which can contain custom validation logic
• validator allows a custom arbitrary function to be called during validation

The details around how and when each of these validation options get used are described in the documentation for getErrors.

By default, the field value is checked for validity immediately while the user is typing in the field. This can be controlled with the validateOnChange, checkChangeEvents, and checkChangeBuffer configurations. Also see the details on Form Validation in the Ext.form.Panel class documentation.

Masking and Character Stripping

Text fields can be configured with custom regular expressions to be applied to entered values before validation: see maskRe and stripCharsRe for details.

Example usage

  
    Ext.create('Ext.form.Panel', {
            title: 'Contact Info',
            width: 300,
            bodyPadding: 10,
            renderTo: Ext.getBody(),
            items: [{
            xtype: 'textfield',
            name: 'name',
            fieldLabel: 'Name',
            allowBlank: false  // requires a non-empty value
            }, {
            xtype: 'textfield',
            name: 'email',
            fieldLabel: 'Email Address',
            vtype: 'email'  // requires value to be a valid email address format
            }]
            });
            

Namespace: Ext.form.field