Clear Up
SharpKit Reference

Base Class

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()
            });
            

Namespace: Ext.form.field

Constructors

Fields

Name Description
activeError If specified, then the component will be displayed with this value as its active error when first rendered. Use setActiveError or unsetActiveError to change it after component creation.
activeErrorsTpl The template used to format the Array of error messages passed to setActiveErrors into a single HTML string. By default this renders each message as an item in an unordered list. Defaults to: ["<tpl if="errors && errors.length">", "<ul><tpl for="errors"><li>{.}</li></tpl></ul>", "</tpl>"]
afterBodyEl An optional string or XTemplate configuration to insert in the field markup at the end of the input containing element. If an XTemplate is used, the component's render data serves as the context.
afterLabelTextTpl An optional string or XTemplate configuration to insert in the field markup after the label text. If an XTemplate is used, the component's render data serves as the context.
afterLabelTpl An optional string or XTemplate configuration to insert in the field markup after the label element. If an XTemplate is used, the component's render data serves as the context.
afterSubTpl An optional string or XTemplate configuration to insert in the field markup after the subTpl markup. If an XTemplate is used, the component's render data serves as the context.
autoFitErrors Whether to adjust the component's body area to make room for 'side' or 'under' error messages. Defaults to: true
baseBodyCls The CSS class to be applied to the body content element. Defaults to: "x-form-item-body"
beforeBodyEl An optional string or XTemplate configuration to insert in the field markup at the beginning of the input containing element. If an XTemplate is used, the component's render data serves as the context.
beforeLabelTextTpl An optional string or XTemplate configuration to insert in the field markup before the label text. If an XTemplate is used, the component's render data serves as the context.
beforeLabelTpl An optional string or XTemplate configuration to insert in the field markup before the label element. If an XTemplate is used, the component's render data serves as the context.
beforeSubTpl An optional string or XTemplate configuration to insert in the field markup before the subTpl markup. If an XTemplate is used, the component's render data serves as the context.
checkChangeBuffer Defines a timeout in milliseconds for buffering checkChangeEvents that fire in rapid succession. Defaults to 50 milliseconds. Defaults to: 50
checkChangeEvents A list of event names that will be listened for on the field's input element, which will cause the field's value to be checked for changes. If a change is detected, the change event will be fired, followed by validation if the validateOnChange option is enabled. Defaults to ['change', 'propertychange'] in Internet Explorer, and ['change', 'input', 'textInput', 'keyup', 'dragdrop'] in other browsers. This catches all the ways that field values can be changed in most supported browsers; the only known exceptions at the time of writing are:
  • Safari 3.2 and older: cut/paste in textareas via the context menu, and dragging text into textareas
  • Opera 10 and 11: dragging text into text fields and textareas, and cut via the context menu in text fields and textareas
  • Opera 9: Same as Opera 10 and 11, plus paste from context menu in text fields and textareas
  • If you need to guarantee on-the-fly change notifications including these edge cases, you can call the checkChange method on a repeating interval, e.g. using Ext.TaskManager, or if the field is within a Ext.form.Panel, you can use the FormPanel's Ext.form.Panel.pollForChanges configuration to set up such a task automatically.
    clearCls The CSS class to be applied to the special clearing div rendered directly after the field contents wrapper to provide field clearing. Defaults to: "x-clear"
    dirtyCls The CSS class to use when the field value is dirty. Defaults to: "x-form-dirty"
    errorMsgCls The CSS class to be applied to the error message element. Defaults to: "x-form-error-msg"
    fieldBodyCls An extra CSS class to be applied to the body content element in addition to baseBodyCls. Defaults to: ""
    fieldCls The default CSS class for the field input Defaults to: "x-form-field"
    fieldLabel The label for the field. It gets appended with the labelSeparator, and its position and sizing is determined by the labelAlign, labelWidth, and labelPad configs.
    fieldStyle Optional CSS style(s) to be applied to the field input element. Should be a valid argument to Ext.Element.applyStyles. Defaults to undefined. See also the setFieldStyle method for changing the style after initialization.
    fieldSubTpl The content of the field body is defined by this config option. Defaults to: ["<input id="{id}" type="{type}" {inputAttrTpl}", " size="1"", "<tpl if="name"> name="{name}"</tpl>", "<tpl if="value"> value="{[Ext.util.Format.htmlEncode(values.value)]}"</tpl>", "<tpl if="placeholder"> placeholder="{placeholder}"</tpl>", "{%if (values.maxLength !== undefined){%} maxlength="{maxLength}"{%}%}", "<tpl if="readOnly"> readonly="readonly"</tpl>", "<tpl if="disabled"> disabled="disabled"</tpl>", "<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>", "<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>", " class="{fieldCls} {typeCls} {editableCls}" autocomplete="off"/>", {disableFormats: true}]
    focusCls The CSS class to use when the field receives focus Defaults to: "x-form-focus"
    formItemCls A CSS class to be applied to the outermost element to denote that it is participating in the form field layout. Defaults to: "x-form-item"
    hideEmptyLabel When set to true, the label element (fieldLabel and labelSeparator) will be automatically hidden if the fieldLabel is empty. Setting this to false will cause the empty label element to be rendered and space to be reserved for it; this is useful if you want a field without a label to line up with other labeled fields in the same form. If you wish to unconditionall hide the label even if a non-empty fieldLabel is configured, then set the hideLabel config to true. Defaults to: true
    hideLabel Set to true to completely hide the label element (fieldLabel and labelSeparator). Also see hideEmptyLabel, which controls whether space will be reserved for an empty fieldLabel. Defaults to: false
    inputAttrTpl An optional string or XTemplate configuration to insert in the field markup inside the input element (as attributes). If an XTemplate is used, the component's subTpl data serves as the context.
    inputId The id that will be given to the generated input DOM element. Defaults to an automatically generated id. If you configure this manually, you must make sure it is unique in the document.
    inputType The type attribute for input fields -- e.g. radio, text, password, file. The extended types supported by HTML5 inputs (url, email, etc.) may also be used, though using them will cause older browsers to fall back to 'text'. The type 'password' must be used to render that field type currently -- there is no separate Ext component for that. You can use Ext.form.field.File which creates a custom-rendered file upload field, but if you want a plain unstyled file input you can use a Base with inputType:'file'. Defaults to: "text"
    invalidCls The CSS class to use when marking the component invalid. Defaults to: "x-form-invalid"
    invalidText The error text to use when marking a field invalid and no message is provided Defaults to: "The value in this field is invalid"
    labelableRenderTpl The rendering template for the field decorations. Component classes using this mixin should include logic to use this as their renderTpl, and implement the getSubTplMarkup method to generate the field body content. The structure of a field is a table as follows: If labelAlign: 'left',msgTarget: 'side'`
    +----------------------+----------------------+-------------+
               | Label:               | InputField           | sideErrorEl |
               +----------------------+----------------------+-------------+
                
    If labelAlign: 'left',msgTarget: 'under'`
    +----------------------+------------------------------------+
               | Label:               | InputField      (colspan=2)        |
               |                      | underErrorEl                       |
               +----------------------+------------------------------------+
                
    If labelAlign: 'top',msgTarget: 'side'`
    +---------------------------------------------+-------------+
               | label                                       |             |
               | InputField                                  | sideErrorEl |
               +---------------------------------------------+-------------+
                
    If labelAlign: 'top',msgTarget: 'under'`
    +-----------------------------------------------------------+
               | label                                                     |
               | InputField                      (colspan=2)               |
               | underErrorEl                                              |
               +-----------------------------------------------------------+
                
    The total columns always the same for fields with each setting of labelAlign because when rendered into a Ext.layout.container.Form layout, just the TR of the table will be placed into the form's main TABLE, and the columns of all the siblings must match so that they all line up. In a Ext.layout.container.Form layout, different settings of labelAlign are not supported because of the incompatible column structure. When the triggerCell or side error cell are hidden or shown, the input cell's colspan is recalculated to maintain the correct 3 visible column count. Defaults to: ["<tr id="{id}-inputRow" <tpl if="inFormLayout">id="{id}"</tpl>>", "<tpl if="labelOnLeft">", "<td id="{id}-labelCell" style="{labelCellStyle}" {labelCellAttrs}>", "{beforeLabelTpl}", "<label id="{id}-labelEl" {labelAttrTpl}<tpl if="inputId"> for="{inputId}"</tpl> class="{labelCls}"", "<tpl if="labelStyle"> style="{labelStyle}"</tpl>>", "{beforeLabelTextTpl}", "<tpl if="fieldLabel">{fieldLabel}{labelSeparator}</tpl>", "{afterLabelTextTpl}", "</label>", "{afterLabelTpl}", "</td>", "</tpl>", "<td class="{baseBodyCls} {fieldBodyCls}" id="{id}-bodyEl" colspan="{bodyColspan}" role="presentation">", "{beforeBodyEl}", "<tpl if="labelAlign==\'top\'">", "{beforeLabelTpl}", "<div id="{id}-labelCell" style="{labelCellStyle}">", "<label id="{id}-labelEl" {labelAttrTpl}<tpl if="inputId"> for="{inputId}"</tpl> class="{labelCls}"", "<tpl if="labelStyle"> style="{labelStyle}"</tpl>>", "{beforeLabelTextTpl}", "<tpl if="fieldLabel">{fieldLabel}{labelSeparator}</tpl>", "{afterLabelTextTpl}", "</label>", "</div>", "{afterLabelTpl}", "</tpl>", "{beforeSubTpl}", "{[values.$comp.getSubTplMarkup()]}", "{afterSubTpl}", "<tpl if="msgTarget===\'side\'">", "{afterBodyEl}", "</td>", "<td id="{id}-sideErrorCell" vAlign="{[values.labelAlign===\'top\' && !values.hideLabel ? \'bottom\' : \'middle\']}" style="{[values.autoFitErrors ? \'display:none\' : \'\']}" width="{errorIconWidth}">", "<div id="{id}-errorEl" class="{errorMsgCls}" style="display:none;width:{errorIconWidth}px"></div>", "</td>", "<tpl elseif="msgTarget==\'under\'">", "<div id="{id}-errorEl" class="{errorMsgClass}" colspan="2" style="display:none"></div>", "{afterBodyEl}", "</td>", "</tpl>", "</tr>", {disableFormats: true}]
    labelAlign Controls the position and alignment of the fieldLabel. Valid values are:
  • "left" (the default) - The label is positioned to the left of the field, with its text aligned to the left. Its width is determined by the labelWidth config.
  • "top" - The label is positioned above the field.
  • "right" - The label is positioned to the left of the field, with its text aligned to the right. Its width is determined by the labelWidth config.
  • Defaults to: "left"
    labelAttrTpl An optional string or XTemplate configuration to insert in the field markup inside the label element (as attributes). If an XTemplate is used, the component's render data serves as the context.
    labelCls The CSS class to be applied to the label element. This (single) CSS class is used to formulate the renderSelector and drives the field layout where it is concatenated with a hyphen ('-') and labelAlign. To add additional classes, use labelClsExtra. Defaults to: "x-form-item-label"
    labelClsExtra An optional string of one or more additional CSS classes to add to the label element. Defaults to empty.
    labelPad The amount of space in pixels between the fieldLabel and the input field. Defaults to: 5
    labelSeparator Character(s) to be inserted at the end of the label text. Set to empty string to hide the separator completely. Defaults to: ":"
    labelStyle A CSS style specification string to apply directly to this field's label.
    labelWidth The width of the fieldLabel in pixels. Only applicable if the labelAlign is set to "left" or "right". Defaults to: 100
    msgTarget The location where the error message text should display. Must be one of the following values:
  • qtip Display a quick tip containing the message when the user hovers over the field. This is the default.

    Ext.tip.QuickTipManager.init must have been called for this setting to work.

  • title Display the message in a default browser title attribute popup.

  • under Add a block div beneath the field containing the error message.
  • side Add an error icon to the right of the field, displaying the message in a popup on hover.
  • none Don't display any error message. This might be useful if you are implementing custom error display.
  • [element id] Add the error message directly to the innerHTML of the specified element.
  • Defaults to: "qtip"
    name The name of the field. This is used as the parameter name when including the field value in a form submit(). If no name is configured, it falls back to the inputId. To prevent the field from being included in the form submit, set submitValue to false. Overrides: Ext.form.field.Field.name
    preventMark true to disable displaying any error message set on this object. Defaults to: false
    readOnly true to mark the field as readOnly in HTML. Note: this only sets the element's readOnly DOM attribute. Setting readOnly=true, for example, will not disable triggering a ComboBox or Date; it gives you the option of forcing the user to choose via the trigger without typing in the text box. To hide the trigger use hideTrigger . Defaults to: false
    readOnlyCls The CSS class applied to the component's main element when it is readOnly. Defaults to: "x-form-readonly"
    submitValue Setting this to false will prevent the field from being submitted even when it is not disabled. Defaults to: true
    tabIndex The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo
    validateOnBlur Whether the field should validate when it loses focus. This will cause fields to be validated as the user steps through the fields in the form regardless of whether they are making changes to those fields along the way. See also validateOnChange. Defaults to: true
    validateOnChange Specifies whether this field should be validated immediately whenever a change in its value is detected. If the validation results in a change in the field's validity, a validitychange event will be fired. This allows the field to show feedback about the validity of its contents immediately as the user is typing. When set to false, feedback will not be immediate. However the form will still be validated before submitting if the clientValidation option to Ext.form.Basic.doAction is enabled, or if the field or form are validated manually. See also Ext.form.field.Base.checkChangeEvents for controlling how changes to the field's value are detected. Defaults to: true
    value A value to initialize this field with.

    Methods

    Name Description
    batchChanges(Delegate) A utility for grouping a set of modifications which may trigger value changes into a single transaction, to prevent excessive firing of change events. This is useful for instance if the field has sub-fields which are being updated as a group; you don't want the container field to check its own changed state for each subfield change.
    beforeReset() Template method before a field is reset.
    checkChange() Checks whether the value of the field has changed since the last time it was checked. If the value has changed, it:
  • Fires the change event,
  • Performs validation if the validateOnChange config is enabled, firing the validitychange event if the validity has changed, and
  • Checks the dirty state of the field and fires the dirtychange event if it has changed.
  • checkDirty() Checks the isDirty state of the field and if it has changed since the last time it was checked, fires the dirtychange event.
    clearInvalid() Clear any invalid styles/messages for this field. Note: this method does not cause the Field's validate or isValid methods to return true if the value does not pass validation. So simply clearing a field's errors will not necessarily allow submission of forms submitted with the Ext.form.action.Submit.clientValidation option set. Overrides: Ext.form.field.Field.clearInvalid
    extractFileInput() Only relevant if the instance's isFileUpload method returns true. Returns a reference to the file input DOM element holding the user's selected file. The input will be appended into the submission form and will not be returned, so this method should also create a replacement.
    getActiveError() Gets the active error message for this component, if any. This does not trigger validation on its own, it merely returns any message that the component may already hold.
    getActiveErrors() Gets an Array of any active error messages currently applied to the field. This does not trigger validation on its own, it merely returns any messages that the component may already hold.
    getBodyColspan() Calculates the colspan value for the body cell - the cell which contains the input field. The field table structure contains 4 columns:
    getErrors(object) Runs this field's validators and returns an array of error messages for any validation failures. This is called internally during validation and would not usually need to be used manually. Each subclass should override or augment the return value to provide their own errors.
    getFieldLabel() Returns the label for the field. Defaults to simply returning the fieldLabel config. Can be overridden to provide a custom generated label.

    This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

    getInputId() Returns the input id for this field. If none was specified via the inputId config, then an id will be automatically generated. Overrides: Ext.form.Labelable.getInputId
    getLabelableRenderData() Generates the arguments for the field decorations rendering template.
    getLabelStyle() Gets any label styling for the labelEl
    getModelData() Returns the value(s) that should be saved to the Ext.data.Model instance for this field, when Ext.form.Basic.updateRecord is called. Typically this will be an object with a single name-value pair, the name being this field's name and the value being its current data value. More advanced field implementations may return more than one name-value pair. The returned values will be saved to the corresponding field names in the Model. Note that the values returned from this method are not guaranteed to have been successfully validated.
    getName() Returns the name attribute of the field. This is used as the parameter name when including the field value in a form submit().
    getRawValue() Returns the raw value of the field, without performing any normalization, conversion, or validation. To get a normalized and converted value see getValue.
    getSubmitData() Returns the parameter(s) that would be included in a standard form submit for this field. Typically this will be an object with a single name-value pair, the name being this field's name and the value being its current stringified value. More advanced field implementations may return more than one name-value pair. Note that the values returned from this method are not guaranteed to have been successfully validated.
    getSubmitValue() Returns the value that would be included in a standard form submit for this field. This will be combined with the field's name to form a name=value pair in the submitted parameters. If an empty string is returned then just the name= will be submitted; if null is returned then nothing will be submitted. Note that the value returned will have been processed but may or may not have been successfully validated.
    getSubTplData() Creates and returns the data object to be used when rendering the fieldSubTpl.

    This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

    getSubTplMarkup() Gets the markup to be inserted into the outer template's bodyEl. For fields this is the actual input element. Overrides: Ext.form.Labelable.getSubTplMarkup
    getValue() Returns the current data value of the field. The type of value returned is particular to the type of the particular field (e.g. a Date object for Ext.form.field.Date), as the result of calling rawToValue on the field's processed String value. To return the raw String value, see getRawValue.
    hasActiveError() Tells whether the field currently has an active error message. This does not trigger validation on its own, it merely looks for any message that the component may already hold.
    hasVisibleLabel() Checks if the field has a visible label
    initField() Initializes this Field mixin on the current instance. Components using this mixin should call this method during their own initialization process.
    initLabelable() Performs initialization of this mixin. Component classes using this mixin should call this method during their own initialization.
    initValue() Initializes the field's value based on the initial config.
    isDirty() Returns true if the value of this Field has been changed from its originalValue. Will always return false if the field is disabled. Note that if the owning form was configured with trackResetOnLoad then the originalValue is updated when the values are loaded by Ext.form.Basic.setValues.
    isEqual(object, object) Returns whether two field values are logically equal. Field implementations may override this to provide custom comparison logic appropriate for the particular field's data type.
    isEqualAsString(object, object) Returns whether two values are logically equal. Similar to isEqual, however null or undefined values will be treated as empty strings.
    isFileUpload() Returns whether this Field is a file upload field; if it returns true, forms will use special techniques for submitting the form via AJAX. See Ext.form.Basic.hasUpload for details. If this returns true, the extractFileInput method must also be implemented to return the corresponding file input element.
    isValid() Returns whether or not the field value is currently valid by validating the processed raw value of the field. Note: disabled fields are always treated as valid.
    markInvalid(object) Display one or more error messages associated with this field, using msgTarget to determine how to display the messages and applying invalidCls to the field's UI element. Note: this method does not cause the Field's validate or isValid methods to return false if the value does pass validation. So simply marking a Field as invalid will not prevent submission of forms submitted with the Ext.form.action.Submit.clientValidation option set.
    onChange(object, object) Called when the field's value changes. Performs validation if the validateOnChange config is enabled, and invokes the dirty check.
    onDirtyChange(bool) Called when the field's dirty state changes. Adds/removes the dirtyCls on the main element.
    processRawValue(object) Performs any necessary manipulation of a raw field value to prepare it for conversion and/or validation, for instance stripping out ignored characters. In the base implementation it does nothing; individual subclasses may override this as needed.
    rawToValue(object) Converts a raw input field value into a mixed-type value that is suitable for this particular field type. This allows controlling the normalization and conversion of user-entered values into field-type-appropriate values, e.g. a Date object for Ext.form.field.Date, and is invoked by getValue. It is up to individual implementations to decide how to handle raw values that cannot be successfully converted to the desired object type. See valueToRaw for the opposite conversion. The base implementation does no conversion, returning the raw value untouched.
    renderActiveError() Overrides the method from the Ext.form.Labelable mixin to also add the invalidCls to the inputEl, as that is required for proper styling in IE with nested fields (due to lack of child selector) Overrides: Ext.form.Labelable.renderActiveError
    reset() Resets the current field value to the originally loaded value and clears any validation messages. See Ext.form.Basic.trackResetOnLoad
    resetOriginalValue() Resets the field's originalValue property so it matches the current value. This is called by Ext.form.Basic.setValues if the form's trackResetOnLoad property is set to true.
    setActiveError(JsString) Sets the active error message to the given string. This replaces the entire error message contents with the given string. Also see setActiveErrors which accepts an Array of messages and formats them according to the activeErrorsTpl. Note that this only updates the error message element's text and attributes, you'll have to call doComponentLayout to actually update the field's layout to match. If the field extends Ext.form.field.Base you should call markInvalid instead.
    setActiveErrors(JsArray<T>) Set the active error message to an Array of error messages. The messages are formatted into a single message string using the activeErrorsTpl. Also see setActiveError which allows setting the entire error contents with a single string. Note that this only updates the error message element's text and attributes, you'll have to call doComponentLayout to actually update the field's layout to match. If the field extends Ext.form.field.Base you should call markInvalid instead.
    setFieldDefaults(object) Applies a set of default configuration values to this Labelable instance. For each of the properties in the given object, check if this component hasOwnProperty that config; if not then it's inheriting a default value from its prototype and we should apply the default value.
    setFieldLabel(JsString) Set the label of this field.
    setFieldStyle(object) Set the CSS style of the field input element.
    setRawValue(object) Sets the field's raw value directly, bypassing value conversion, change detection, and validation. To set the value with these additional inspections see setValue.
    setReadOnly(bool) Sets the read only state of this field.
    setValue(object) Sets a data value into the field and runs the change detection and validation. To set the value directly without these inspections see setRawValue.
    transformOriginalValue(object) Allows for any necessary modifications before the original value is set
    transformRawValue(object) Transform the raw value before it is set
    trimLabelSeparator() Returns the trimmed label by slicing off the label separator character. Can be overridden.
    unsetActiveError() Clears the active error message(s). Note that this only clears the error message element's text and attributes, you'll have to call doComponentLayout to actually update the field's layout to match. If the field extends Ext.form.field.Base you should call clearInvalid instead.
    validate() Returns whether or not the field value is currently valid by validating the field's current value, and fires the validitychange event if the field's validity has changed since the last validation. Note: disabled fields are always treated as valid. Custom implementations of this method are allowed to have side-effects such as triggering error message display. To validate without side-effects, use isValid.
    validateValue(object) Uses getErrors to build an array of validation errors. If any errors are found, they are passed to markInvalid and false is returned, otherwise true is returned. Previously, subclasses were invited to provide an implementation of this to process validations - from 3.2 onwards getErrors should be overridden instead.
    valueToRaw(object) Converts a mixed-type value to a raw representation suitable for displaying in the field. This allows controlling how value objects passed to setValue are shown to the user, including localization. For instance, for a Ext.form.field.Date, this would control how a Date object passed to setValue would be converted to a String for display in the field. See rawToValue for the opposite conversion. The base implementation simply does a standard toString conversion, and converts empty values to an empty string.

    Properties

    Name Description
    bodyEl The div Element wrapping the component's contents. Only available after the component has been rendered.
    errorEl The div Element that will contain the component's error message(s). Note that depending on the configured msgTarget, this element may be hidden in favor of some other form of presentation, but will always be present in the DOM for use by assistive technologies.
    inputEl The input Element for this Field. Only available after the field has been rendered.
    isFieldLabelable Flag denoting that this object is labelable as a field. Always true. Defaults to: true
    isFormField Flag denoting that this component is a Field. Always true. Defaults to: true
    labelCell The <TD> Element which contains the label Element for this component. Only available after the component has been rendered.
    labelEl The label Element for this component. Only available after the component has been rendered.
    noWrap Tells the layout system that the height can be measured immediately because the width does not need setting. Defaults to: true
    originalValue The original value of the field as configured in the value configuration, or as loaded by the last form load operation if the form's trackResetOnLoad setting is true.
    suspendCheckChange Defaults to: 0
    © Copyright 2005-2011 SharpKit. All rights reserved.