Clear Up
SharpKit Reference

Text Class

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).


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



Name Description
allowBlank Specify false to validate that the value's length is > 0 Defaults to: true
blankText The error text to display if the allowBlank validation fails Defaults to: "This field is required"
disableKeyFilter Specify true to disable input keystroke filtering Defaults to: false
emptyCls The CSS class to apply to an empty field to style the emptyText. This class is automatically added and removed as needed depending on the current field value. Defaults to: "x-form-empty-field"
emptyText The default text to place into an empty field. Note that normally this value will be submitted to the server if this field is enabled; to prevent this you can set the submitEmptyText option of Ext.form.Basic.submit to false. Also note that if you use inputType:'file', emptyText is not supported and should be avoided. Note that for browsers that support it, setting this property will use the HTML 5 placeholder attribute, and for older browsers that don't support the HTML 5 placeholder attribute the value will be placed directly into the input element itself as the raw value. This means that older browsers will obfuscate the emptyText value for password input fields.
enableKeyEvents true to enable the proxying of key events for the HTML input field Defaults to: false
enforceMaxLength True to set the maxLength property on the underlying input field. Defaults to false
grow true if this field should automatically grow and shrink to its content Defaults to: false
growAppend A string that will be appended to the field's current value for the purposes of calculating the target field size. Only used when the grow config is true. Defaults to a single capital "W" (the widest character in common fonts) to leave enough space for the next typed character and avoid the field value shifting before the width is adjusted. Defaults to: "W"
growMax The maximum width to allow when grow = true Defaults to: 800
growMin The minimum width to allow when grow = true Defaults to: 30
maskRe An input mask regular expression that will be used to filter keystrokes (character being typed) that do not match. Note: It does not filter characters already in the input.
maxLength Maximum input field length allowed by validation. This behavior is intended to provide instant feedback to the user by improving usability to allow pasting and editing or overtyping and back tracking. To restrict the maximum number of characters that can be entered into the field use the enforceMaxLength option. Defaults to Number.MAX_VALUE.
maxLengthText Error text to display if the maximum length validation fails Defaults to: "The maximum length for this field is {0}"
minLength Minimum input field length required Defaults to: 0
minLengthText Error text to display if the minimum length validation fails. Defaults to: "The minimum length for this field is {0}"
regex A JavaScript RegExp object to be tested against the field value during validation. If the test fails, the field will be marked invalid using either regexText or invalidText.
regexText The error text to display if regex is used and the test fails during validation Defaults to: ""
requiredCls The CSS class to apply to a required field, i.e. a field where allowBlank is false. Defaults to: "x-form-required-field"
selectOnFocus true to automatically select any existing field text when the field receives input focus Defaults to: false
size An initial value for the 'size' attribute on the text input element. This is only used if the field has no configured width and is not given a width by its container's layout. Defaults to 20. Defaults to: 20
stripCharsRe A JavaScript RegExp object used to strip unwanted content from the value during input. If stripCharsRe is specified, every character sequence matching stripCharsRe will be removed.
validator A custom validation function to be called during field validation (getErrors). If specified, this function will be called first, allowing the developer to override the default validation process. This function will be passed the following parameters:
vtype A validation type name as defined in Ext.form.field.VTypes
vtypeText A custom error message to display in place of the default message provided for the vtype currently set for this field. Note: only applies if vtype is set, else ignored.


Name Description
autoSize() Automatically grows the field to accomodate the width of the text up to the maximum field width allowed. This only takes effect if grow = true, and fires the autosize event if the width changes.
selectText(object, object) Selects text in this field
© Copyright 2005-2011 SharpKit. All rights reserved.