Clear Up
SharpKit Reference

Ext.form.field Namespace

Download SDK: SharpKit.ExtJs.zip

Classes

Name Description
Base

Base class for form fields that provides default event handling, rendering, and other common functionality needed by all form field types. Utilizes the Ext.form.field.Field mixin for value handling and validation, and the Ext.form.Labelable mixin to provide label and error message display.

In most cases you will want to use a subclass, such as Ext.form.field.Text or Ext.form.field.Checkbox, rather than creating instances of this class directly. However if you are implementing a custom form field, using this as the parent class is recommended.

Values and Conversions

Because Base implements the Field mixin, it has a main value that can be initialized with the value config and manipulated via the getValue and setValue methods. This main value can be one of many data types appropriate to the current field, for instance a Date field would use a JavaScript Date object as its value type. However, because the field is rendered as a HTML input, this value data type can not always be directly used in the rendered field.

Therefore Base introduces the concept of a "raw value". This is the value of the rendered HTML input field, and is normally a String. The getRawValue and setRawValue methods can be used to directly work with the raw value, though it is recommended to use getValue and setValue in most cases.

Conversion back and forth between the main value and the raw value is handled by the valueToRaw and rawToValue methods. If you are implementing a subclass that uses a non-String value data type, you should override these methods to handle the conversion.

Rendering

The content of the field body is defined by the fieldSubTpl XTemplate, with its argument data created by the getSubTplData method. Override this template and/or method to create custom field renderings.

Example usage:

  
// A simple subclass of Base that creates a HTML5 search field. Redirects to the
            // searchUrl when the Enter key is pressed.222
            Ext.define('Ext.form.SearchField', {
            extend: 'Ext.form.field.Base',
            alias: 'widget.searchfield',
            inputType: 'search',
            // Config defining the search URL
            searchUrl: 'http://www.google.com/search?q={0}',
            // Add specialkey listener
            initComponent: function() {
            this.callParent();
            this.on('specialkey', this.checkEnterKey, this);
            },
            // Handle enter key presses, execute the search if the field has a value
            checkEnterKey: function(field, e) {
            var value = this.getValue();
            if (e.getKey() === e.ENTER && !Ext.isEmpty(value)) {
            location.href = Ext.String.format(this.searchUrl, value);
            }
            }
            });
            Ext.create('Ext.form.Panel', {
            title: 'Base Example',
            bodyPadding: 5,
            width: 250,
            // Fields will be arranged vertically, stretched to full width
            layout: 'anchor',
            defaults: {
            anchor: '100%'
            },
            items: [{
            xtype: 'searchfield',
            fieldLabel: 'Search',
            name: 'query'
            }],
            renderTo: Ext.getBody()
            });
            
BaseConfig
BaseEvents
Checkbox

Single checkbox field. Can be used as a direct replacement for traditional checkbox fields. Also serves as a parent class for radio buttons.

Labeling

In addition to the standard field labeling options, checkboxes may be given an optional boxLabel which will be displayed immediately after checkbox. Also see Ext.form.CheckboxGroup for a convenient method of grouping related checkboxes.

Values

The main value of a checkbox is a boolean, indicating whether or not the checkbox is checked. The following values will check the checkbox:

  • true
  • 'true'
  • '1'
  • 'on'

Any other value will uncheck the checkbox.

In addition to the main boolean value, you may also specify a separate inputValue. This will be sent as the parameter value when the form is submitted. You will want to set this value if you have multiple checkboxes with the same name. If not specified, the value on will be used.

Example usage

  
    Ext.create('Ext.form.Panel', {
            bodyPadding: 10,
            width: 300,
            title: 'Pizza Order',
            items: [
            {
            xtype: 'fieldcontainer',
            fieldLabel: 'Toppings',
            defaultType: 'checkboxfield',
            items: [
            {
            boxLabel  : 'Anchovies',
            name      : 'topping',
            inputValue: '1',
            id        : 'checkbox1'
            }, {
            boxLabel  : 'Artichoke Hearts',
            name      : 'topping',
            inputValue: '2',
            checked   : true,
            id        : 'checkbox2'
            }, {
            boxLabel  : 'Bacon',
            name      : 'topping',
            inputValue: '3',
            id        : 'checkbox3'
            }
            ]
            }
            ],
            bbar: [
            {
            text: 'Select Bacon',
            handler: function() {
            Ext.getCmp('checkbox3').setValue(true);
            }
            },
            '-',
            {
            text: 'Select All',
            handler: function() {
            Ext.getCmp('checkbox1').setValue(true);
            Ext.getCmp('checkbox2').setValue(true);
            Ext.getCmp('checkbox3').setValue(true);
            }
            },
            {
            text: 'Deselect All',
            handler: function() {
            Ext.getCmp('checkbox1').setValue(false);
            Ext.getCmp('checkbox2').setValue(false);
            Ext.getCmp('checkbox3').setValue(false);
            }
            }
            ],
            renderTo: Ext.getBody()
            });
            
CheckboxConfig
CheckboxEvents
ComboBox

A combobox control with support for autocomplete, remote loading, and many other features.

A ComboBox is like a combination of a traditional HTML text <input> field and a <select> field; the user is able to type freely into the field, and/or pick values from a dropdown selection list. The user can input any value by default, even if it does not appear in the selection list; to prevent free-form values and restrict them to items in the list, set forceSelection to true.

The selection list's options are populated from any Ext.data.Store, including remote stores. The data items in the store are mapped to each option's displayed text and backing value via the valueField and displayField configurations, respectively.

If your store is not remote, i.e. it depends only on local data and is loaded up front, you should be sure to set the queryMode to 'local', as this will improve responsiveness for the user.

Example usage:

  
// The data store containing the list of states
            var states = Ext.create('Ext.data.Store', {
            fields: ['abbr', 'name'],
            data : [
            {"abbr":"AL", "name":"Alabama"},
            {"abbr":"AK", "name":"Alaska"},
            {"abbr":"AZ", "name":"Arizona"}
            //...
            ]
            });
            // Create the combo box, attached to the states data store
            Ext.create('Ext.form.ComboBox', {
            fieldLabel: 'Choose State',
            store: states,
            queryMode: 'local',
            displayField: 'name',
            valueField: 'abbr',
            renderTo: Ext.getBody()
            });
            

Events

To do something when something in ComboBox is selected, configure the select event:

  
var cb = Ext.create('Ext.form.ComboBox', {
            // all of your config options
            listeners:{
            scope: yourScope,
            'select': yourFunction
            }
            });
            // Alternatively, you can assign events after the object is created:
            var cb = new Ext.form.field.ComboBox(yourOptions);
            cb.on('select', yourFunction, yourScope);
            

Multiple Selection

ComboBox also allows selection of multiple items from the list; to enable multi-selection set the multiSelect config to true.

Filtered Stores

If you have a local store that is already filtered, you can use the lastQuery config option to prevent the store from having the filter being cleared on first expand.

Customized combobox

Both the text shown in dropdown menu and text field can be easily customized:

  
var states = Ext.create('Ext.data.Store', {
            fields: ['abbr', 'name'],
            data : [
            {"abbr":"AL", "name":"Alabama"},
            {"abbr":"AK", "name":"Alaska"},
            {"abbr":"AZ", "name":"Arizona"}
            ]
            });
            Ext.create('Ext.form.ComboBox', {
            fieldLabel: 'Choose State',
            store: states,
            queryMode: 'local',
            valueField: 'abbr',
            renderTo: Ext.getBody(),
            // Template for the dropdown menu.
            // Note the use of "x-boundlist-item" class,
            // this is required to make the items selectable.
            tpl: Ext.create('Ext.XTemplate',
            '<tpl for=".">',
            '<div class="x-boundlist-item">{abbr} - {name}</div>',
            '</tpl>'
            ),
            // template for the content inside text field
            displayTpl: Ext.create('Ext.XTemplate',
            '<tpl for=".">',
            '{abbr} - {name}',
            '</tpl>'
            )
            });
            

See also the listConfig option for additional configuration of the dropdown.

ComboBoxConfig
ComboBoxEvents
Date

Provides a date input field with a date picker dropdown and automatic date validation.

This field recognizes and uses the JavaScript Date object as its main value type. In addition, it recognizes string values which are parsed according to the format and/or altFormats configs. These may be reconfigured to use date formats appropriate for the user's locale.

The field may be limited to a certain range of dates by using the minValue, maxValue, disabledDays, and disabledDates config parameters. These configurations will be used both in the field's validation, and in the date picker dropdown by preventing invalid dates from being selected.

Example usage

  
    Ext.create('Ext.form.Panel', {
            renderTo: Ext.getBody(),
            width: 300,
            bodyPadding: 10,
            title: 'Dates',
            items: [{
            xtype: 'datefield',
            anchor: '100%',
            fieldLabel: 'From',
            name: 'from_date',
            maxValue: new Date()  // limited to the current date or prior
            }, {
            xtype: 'datefield',
            anchor: '100%',
            fieldLabel: 'To',
            name: 'to_date',
            value: new Date()  // defaults to today
            }]
            });
            

Date Formats Examples

This example shows a couple of different date format parsing scenarios. Both use custom date format configurations; the first one matches the configured format while the second matches the altFormats.

  
    Ext.create('Ext.form.Panel', {
            renderTo: Ext.getBody(),
            width: 300,
            bodyPadding: 10,
            title: 'Dates',
            items: [{
            xtype: 'datefield',
            anchor: '100%',
            fieldLabel: 'Date',
            name: 'date',
            // The value matches the format; will be parsed and displayed using that format.
            format: 'm d Y',
            value: '2 4 1978'
            }, {
            xtype: 'datefield',
            anchor: '100%',
            fieldLabel: 'Date',
            name: 'date',
            // The value does not match the format, but does match an altFormat; will be parsed
            // using the altFormat and displayed using the format.
            format: 'm d Y',
            altFormats: 'm,d,Y|m.d.Y',
            value: '2.4.1978'
            }]
            });
            
DateConfig
DateEvents
Display

A display-only text field which is not validated and not submitted. This is useful for when you want to display a value from a form's loaded data but do not want to allow the user to edit or submit that value. The value can be optionally HTML encoded if it contains HTML markup that you do not want to be rendered.

If you have more complex content, or need to include components within the displayed content, also consider using a Ext.form.FieldContainer instead.

Example:

  
    Ext.create('Ext.form.Panel', {
            renderTo: Ext.getBody(),
            width: 175,
            height: 120,
            bodyPadding: 10,
            title: 'Final Score',
            items: [{
            xtype: 'displayfield',
            fieldLabel: 'Home',
            name: 'home_score',
            value: '10'
            }, {
            xtype: 'displayfield',
            fieldLabel: 'Visitor',
            name: 'visitor_score',
            value: '11'
            }],
            buttons: [{
            text: 'Update'
            }]
            });
            
DisplayConfig
DisplayEvents
FieldConfig
FieldEvents
File

A file upload field which has custom styling and allows control over the button text and other features of text fields like empty text. It uses a hidden file input element behind the scenes to allow user selection of a file and to perform the actual upload during form submit.

Because there is no secure cross-browser way to programmatically set the value of a file input, the standard Field setValue method is not implemented. The getValue method will return a value that is browser-dependent; some have just the file name, some have a full path, some use a fake path.

IMPORTANT: File uploads are not performed using normal 'Ajax' techniques; see the description for Ext.form.Basic.hasUpload for details.

Example Usage

  
    Ext.create('Ext.form.Panel', {
            title: 'Upload a Photo',
            width: 400,
            bodyPadding: 10,
            frame: true,
            renderTo: Ext.getBody(),
            items: [{
            xtype: 'filefield',
            name: 'photo',
            fieldLabel: 'Photo',
            labelWidth: 50,
            msgTarget: 'side',
            allowBlank: false,
            anchor: '100%',
            buttonText: 'Select Photo...'
            }],
            buttons: [{
            text: 'Upload',
            handler: function() {
            var form = this.up('form').getForm();
            if(form.isValid()){
            form.submit({
            url: 'photo-upload.php',
            waitMsg: 'Uploading your photo...',
            success: function(fp, o) {
            Ext.Msg.alert('Success', 'Your photo "' + o.result.file + '" has been uploaded.');
            }
            });
            }
            }
            }]
            });
            
FileConfig
FileEvents
Hidden

A basic hidden field for storing hidden values in forms that need to be passed in the form submit.

This creates an actual input element with type="submit" in the DOM. While its label is not rendered by default, it is still a real component and may be sized according to its owner container's layout.

Because of this, in most cases it is more convenient and less problematic to simply pass hidden parameters directly when submitting the form.

Example:

  
new Ext.form.Panel({
            title: 'My Form',
            items: [{
            xtype: 'textfield',
            fieldLabel: 'Text Field',
            name: 'text_field',
            value: 'value from text field'
            }, {
            xtype: 'hiddenfield',
            name: 'hidden_field_1',
            value: 'value from hidden field'
            }],
            buttons: [{
            text: 'Submit',
            handler: function() {
            this.up('form').getForm().submit({
            params: {
            hidden_field_2: 'value from submit call'
            }
            });
            }
            }]
            });
            

Submitting the above form will result in three values sent to the server:

  
text_field=value+from+text+field&hidden;_field_1=value+from+hidden+field&hidden_field_2=value+from+submit+call
            
HiddenConfig
HiddenEvents
HtmlEditor

Provides a lightweight HTML Editor component. Some toolbar features are not supported by Safari and will be automatically hidden when needed. These are noted in the config options where appropriate.

The editor's toolbar buttons have tooltips defined in the buttonTips property, but they are not enabled by default unless the global Ext.tip.QuickTipManager singleton is initialized.

An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within any element that has display set to 'none' can cause problems in Safari and Firefox due to their default iframe reloading bugs.

Example usage

Simple example rendered with default options:

  
    Ext.tip.QuickTipManager.init();  // enable tooltips
            Ext.create('Ext.form.HtmlEditor', {
            width: 580,
            height: 250,
            renderTo: Ext.getBody()
            });
            

Passed via xtype into a container and with custom options:

  
    Ext.tip.QuickTipManager.init();  // enable tooltips
            new Ext.panel.Panel({
            title: 'HTML Editor',
            renderTo: Ext.getBody(),
            width: 550,
            height: 250,
            frame: true,
            layout: 'fit',
            items: {
            xtype: 'htmleditor',
            enableColors: false,
            enableAlignments: false
            }
            });
            

Reflow issues

In some browsers, a layout reflow will cause the underlying editor iframe to be reset. This is most commonly seen when using the editor in collapsed panels with animation. In these cases it is best to avoid animation. More information can be found here: https://bugzilla.mozilla.org/show_bug.cgi?id=90268

HtmlEditorConfig
HtmlEditorEvents
Number

A numeric text field that provides automatic keystroke filtering to disallow non-numeric characters, and numeric validation to limit the value to a range of valid numbers. The range of acceptable number values can be controlled by setting the minValue and maxValue configs, and fractional decimals can be disallowed by setting allowDecimals to false.

By default, the number field is also rendered with a set of up/down spinner buttons and has up/down arrow key and mouse wheel event listeners attached for incrementing/decrementing the value by the step value. To hide the spinner buttons set hideTrigger:true; to disable the arrow key and mouse wheel handlers set keyNavEnabled:false and mouseWheelEnabled:false. See the example below.

Example usage

  
    Ext.create('Ext.form.Panel', {
            title: 'On The Wall',
            width: 300,
            bodyPadding: 10,
            renderTo: Ext.getBody(),
            items: [{
            xtype: 'numberfield',
            anchor: '100%',
            name: 'bottles',
            fieldLabel: 'Bottles of Beer',
            value: 99,
            maxValue: 99,
            minValue: 0
            }],
            buttons: [{
            text: 'Take one down, pass it around',
            handler: function() {
            this.up('form').down('[name=bottles]').spinDown();
            }
            }]
            });
            

Removing UI Enhancements

  
    Ext.create('Ext.form.Panel', {
            title: 'Personal Info',
            width: 300,
            bodyPadding: 10,
            renderTo: Ext.getBody(),
            items: [{
            xtype: 'numberfield',
            anchor: '100%',
            name: 'age',
            fieldLabel: 'Age',
            minValue: 0, //prevents negative numbers
            // Remove spinner buttons, and arrow key and mouse wheel listeners
            hideTrigger: true,
            keyNavEnabled: false,
            mouseWheelEnabled: false
            }]
            });
            

Using Step

  
    Ext.create('Ext.form.Panel', {
            renderTo: Ext.getBody(),
            title: 'Step',
            width: 300,
            bodyPadding: 10,
            items: [{
            xtype: 'numberfield',
            anchor: '100%',
            name: 'evens',
            fieldLabel: 'Even Numbers',
            // Set step so it skips every other number
            step: 2,
            value: 0,
            // Add change handler to force user-entered numbers to evens
            listeners: {
            change: function(field, value) {
            value = parseInt(value, 10);
            field.setValue(value + value % 2);
            }
            }
            }]
            });
            
NumberConfig
NumberEvents
Picker

An abstract class for fields that have a single trigger which opens a "picker" popup below the field, e.g. a combobox menu list or a date picker. It provides a base implementation for toggling the picker's visibility when the trigger is clicked, as well as keyboard navigation and some basic events. Sizing and alignment of the picker can be controlled via the matchFieldWidth and pickerAlign/pickerOffset config properties respectively.

You would not normally use this class directly, but instead use it as the parent class for a specific picker field implementation. Subclasses must implement the createPicker method to create a picker component appropriate for the field.

PickerConfig
PickerEvents
Radio

Single radio field. Similar to checkbox, but automatically handles making sure only one radio is checked at a time within a group of radios with the same name.

Labeling

In addition to the standard field labeling options, radio buttons may be given an optional boxLabel which will be displayed immediately to the right of the input. Also see Ext.form.RadioGroup for a convenient method of grouping related radio buttons.

Values

The main value of a Radio field is a boolean, indicating whether or not the radio is checked.

The following values will check the radio:

  • true
  • 'true'
  • '1'
  • 'on'

Any other value will uncheck it.

In addition to the main boolean value, you may also specify a separate inputValue. This will be sent as the parameter value when the form is submitted. You will want to set this value if you have multiple radio buttons with the same name, as is almost always the case.

Example usage

  
    Ext.create('Ext.form.Panel', {
            title      : 'Order Form',
            width      : 300,
            bodyPadding: 10,
            renderTo   : Ext.getBody(),
            items: [
            {
            xtype      : 'fieldcontainer',
            fieldLabel : 'Size',
            defaultType: 'radiofield',
            defaults: {
            flex: 1
            },
            layout: 'hbox',
            items: [
            {
            boxLabel  : 'M',
            name      : 'size',
            inputValue: 'm',
            id        : 'radio1'
            }, {
            boxLabel  : 'L',
            name      : 'size',
            inputValue: 'l',
            id        : 'radio2'
            }, {
            boxLabel  : 'XL',
            name      : 'size',
            inputValue: 'xl',
            id        : 'radio3'
            }
            ]
            },
            {
            xtype      : 'fieldcontainer',
            fieldLabel : 'Color',
            defaultType: 'radiofield',
            defaults: {
            flex: 1
            },
            layout: 'hbox',
            items: [
            {
            boxLabel  : 'Blue',
            name      : 'color',
            inputValue: 'blue',
            id        : 'radio4'
            }, {
            boxLabel  : 'Grey',
            name      : 'color',
            inputValue: 'grey',
            id        : 'radio5'
            }, {
            boxLabel  : 'Black',
            name      : 'color',
            inputValue: 'black',
            id        : 'radio6'
            }
            ]
            }
            ],
            bbar: [
            {
            text: 'Smaller Size',
            handler: function() {
            var radio1 = Ext.getCmp('radio1'),
            radio2 = Ext.getCmp('radio2'),
            radio3 = Ext.getCmp('radio3');
            //if L is selected, change to M
            if (radio2.getValue()) {
            radio1.setValue(true);
            return;
            }
            //if XL is selected, change to L
            if (radio3.getValue()) {
            radio2.setValue(true);
            return;
            }
            //if nothing is set, set size to S
            radio1.setValue(true);
            }
            },
            {
            text: 'Larger Size',
            handler: function() {
            var radio1 = Ext.getCmp('radio1'),
            radio2 = Ext.getCmp('radio2'),
            radio3 = Ext.getCmp('radio3');
            //if M is selected, change to L
            if (radio1.getValue()) {
            radio2.setValue(true);
            return;
            }
            //if L is selected, change to XL
            if (radio2.getValue()) {
            radio3.setValue(true);
            return;
            }
            //if nothing is set, set size to XL
            radio3.setValue(true);
            }
            },
            '-',
            {
            text: 'Select color',
            menu: {
            indent: false,
            items: [
            {
            text: 'Blue',
            handler: function() {
            var radio = Ext.getCmp('radio4');
            radio.setValue(true);
            }
            },
            {
            text: 'Grey',
            handler: function() {
            var radio = Ext.getCmp('radio5');
            radio.setValue(true);
            }
            },
            {
            text: 'Black',
            handler: function() {
            var radio = Ext.getCmp('radio6');
            radio.setValue(true);
            }
            }
            ]
            }
            }
            ]
            });
            
RadioConfig
RadioEvents
Spinner

A field with a pair of up/down spinner buttons. This class is not normally instantiated directly, instead it is subclassed and the onSpinUp and onSpinDown methods are implemented to handle when the buttons are clicked. A good example of this is the Ext.form.field.Number field which uses the spinner to increment and decrement the field's value by its step config value.

For example:

  
    Ext.define('Ext.ux.CustomSpinner', {
            extend: 'Ext.form.field.Spinner',
            alias: 'widget.customspinner',
            // override onSpinUp (using step isn't neccessary)
            onSpinUp: function() {
            var me = this;
            if (!me.readOnly) {
            var val = parseInt(me.getValue().split(' '), 10)||0; // gets rid of " Pack", defaults to zero on parse failure
            me.setValue((val + me.step) + ' Pack');
            }
            },
            // override onSpinDown
            onSpinDown: function() {
            var val, me = this;
            if (!me.readOnly) {
            var val = parseInt(me.getValue().split(' '), 10)||0; // gets rid of " Pack", defaults to zero on parse failure
            if (val <= me.step) {
            me.setValue('Dry!');
            } else {
            me.setValue((val - me.step) + ' Pack');
            }
            }
            }
            });
            Ext.create('Ext.form.FormPanel', {
            title: 'Form with SpinnerField',
            bodyPadding: 5,
            width: 350,
            renderTo: Ext.getBody(),
            items:[{
            xtype: 'customspinner',
            fieldLabel: 'How Much Beer?',
            step: 6
            }]
            });
            

By default, pressing the up and down arrow keys will also trigger the onSpinUp and onSpinDown methods; to prevent this, set keyNavEnabled = false.

SpinnerConfig
SpinnerEvents
Text

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
            }]
            });
            
TextArea

This class creates a multiline text field, which can be used as a direct replacement for traditional textarea fields. In addition, it supports automatically growing the height of the textarea to fit its content.

All of the configuration options from Ext.form.field.Text can be used on TextArea.

Example usage:

  
    Ext.create('Ext.form.FormPanel', {
            title      : 'Sample TextArea',
            width      : 400,
            bodyPadding: 10,
            renderTo   : Ext.getBody(),
            items: [{
            xtype     : 'textareafield',
            grow      : true,
            name      : 'message',
            fieldLabel: 'Message',
            anchor    : '100%'
            }]
            });
            

Some other useful configuration options when using grow are growMin and growMax. These allow you to set the minimum and maximum grow heights for the textarea.

NOTE: In some browsers, carriage returns ('\r', not to be confused with new lines) will be automatically stripped out the value is set to the textarea. Since we cannot use any reasonable method to attempt to re-insert these, they will automatically be stripped out to ensure the behaviour is consistent across browser.

TextAreaConfig
TextAreaEvents
TextConfig
TextEvents
Time

Provides a time input field with a time dropdown and automatic time validation.

This field recognizes and uses JavaScript Date objects as its main value type (only the time portion of the date is used; the month/day/year are ignored). In addition, it recognizes string values which are parsed according to the format and/or altFormats configs. These may be reconfigured to use time formats appropriate for the user's locale.

The field may be limited to a certain range of times by using the minValue and maxValue configs, and the interval between time options in the dropdown can be changed with the increment config.

Example usage:

  
    Ext.create('Ext.form.Panel', {
            title: 'Time Card',
            width: 300,
            bodyPadding: 10,
            renderTo: Ext.getBody(),
            items: [{
            xtype: 'timefield',
            name: 'in',
            fieldLabel: 'Time In',
            minValue: '6:00 AM',
            maxValue: '8:00 PM',
            increment: 30,
            anchor: '100%'
            }, {
            xtype: 'timefield',
            name: 'out',
            fieldLabel: 'Time Out',
            minValue: '6:00 AM',
            maxValue: '8:00 PM',
            increment: 30,
            anchor: '100%'
            }]
            });
            
TimeConfig
TimeEvents
Trigger

Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default). The trigger has no default action, so you must assign a function to implement the trigger click handler by overriding onTriggerClick. You can create a Trigger field directly, as it renders exactly like a combobox for which you can provide a custom implementation.

For example:

  
    Ext.define('Ext.ux.CustomTrigger', {
            extend: 'Ext.form.field.Trigger',
            alias: 'widget.customtrigger',
            // override onTriggerClick
            onTriggerClick: function() {
            Ext.Msg.alert('Status', 'You clicked my trigger!');
            }
            });
            Ext.create('Ext.form.FormPanel', {
            title: 'Form with TriggerField',
            bodyPadding: 5,
            width: 350,
            renderTo: Ext.getBody(),
            items:[{
            xtype: 'customtrigger',
            fieldLabel: 'Sample Trigger',
            emptyText: 'click the trigger'
            }]
            });
            

However, in general you will most likely want to use Trigger as the base class for a reusable component. Ext.form.field.Date and Ext.form.field.ComboBox are perfect examples of this.

TriggerConfig
TriggerEvents
VTypes

This is a singleton object which contains a set of commonly used field validation functions and provides a mechanism for creating reusable custom field validations. The following field validation functions are provided out of the box:

  • alpha
  • alphanum
  • email
  • url

VTypes can be applied to a Text Field using the vtype configuration:

  
    Ext.create('Ext.form.field.Text', {
            fieldLabel: 'Email Address',
            name: 'email',
            vtype: 'email' // applies email validation rules to this field
            });
            

To create custom VTypes:

  
// custom Vtype for vtype:'time'
            var timeTest = /^([1-9]|1[0-9]):([0-5][0-9])(\s[a|p]m)$/i;
            Ext.apply(Ext.form.field.VTypes, {
            //  vtype validation function
            time: function(val, field) {
            return timeTest.test(val);
            },
            // vtype Text property: The error text to display when the validation function returns false
            timeText: 'Not a valid time.  Must be in the format "12:34 PM".',
            // vtype Mask property: The keystroke filter mask
            timeMask: /[\d\s:amp]/i
            });
            

In the above example the time function is the validator that will run when field validation occurs, timeText is the error message, and timeMask limits what characters can be typed into the field. Note that the Text and Mask functions must begin with the same name as the validator function.

Using a custom validator is the same as using one of the build-in validators - just use the name of the validator function as the vtype configuration on a Text Field:

  
    Ext.create('Ext.form.field.Text', {
            fieldLabel: 'Departure Time',
            name: 'departureTime',
            vtype: 'time' // applies custom time validation rules to this field
            });
            

Another example of a custom validator:

  
// custom Vtype for vtype:'IPAddress'
            Ext.apply(Ext.form.field.VTypes, {
            IPAddress:  function(v) {
            return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);
            },
            IPAddressText: 'Must be a numeric IP address',
            IPAddressMask: /[\d\.]/i
            });
            

It's important to note that using Ext.apply() means that the custom validator function as well as Text and Mask fields are added as properties of the Ext.form.field.VTypes singleton.

VTypesConfig
VTypesEvents

Interfaces

Name Description
Field

This mixin provides a common interface for the logical behavior and state of form fields, including:

  • Getter and setter methods for field values
  • Events and methods for tracking value and validity changes
  • Methods for triggering validation

NOTE: When implementing custom fields, it is most likely that you will want to extend the Ext.form.field.Base component class rather than using this mixin directly, as BaseField contains additional logic for generating an actual DOM complete with label and error message display and a form input field, plus methods that bind the Field value getters and setters to the input field's value.

If you do want to implement this mixin directly and don't want to extend Ext.form.field.Base, then you will most likely want to override the following methods with custom implementations: getValue, setValue, and getErrors. Other methods may be overridden as needed but their base implementations should be sufficient for common cases. You will also need to make sure that initField is called during the component's initialization.

© Copyright 2005-2011 SharpKit. All rights reserved.