Sencha Documentation

Ext.form.Labelable

Overview

A mixin which allows a component to be configured and decorated with a label and/or error message like a form field. This is used by Ext.form.BaseField and Ext.form.FieldContainer to let them be managed by the field layout.

Component classes which use this mixin should use the Field layout or a derivation thereof to properly size and position the label and message according to the component config. They must also call the initLabelable method during component initialization to ensure the mixin gets set up correctly.

Config Options

 
activeError : String
If specified, then the component will be displayed with this value as its active error when first rendered. Defaults ...
If specified, then the component will be displayed with this value as its active error when first rendered. Defaults to undefined. Use setActiveError or unsetActiveError to change it after component creation.
 
autoFitErrors : Boolean
Whether to adjust the component's body area to make room for 'side' or 'under' error messages. Defaults to true.
Whether to adjust the component's body area to make room for 'side' or 'under' error messages. Defaults to true.
 
clearCls : String
The CSS class to be applied to the special clearing div rendered directly after the field contents wrapper to provide...
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').
 
errorMsgCls : String
The CSS class to be applied to the error message element. Defaults to 'x-form-error-msg'.
The CSS class to be applied to the error message element. Defaults to 'x-form-error-msg'.
 
fieldBodyCls : String
The CSS class to be applied to the body content element. Defaults to 'x-form-item-body'.
The CSS class to be applied to the body content element. Defaults to 'x-form-item-body'.
 
fieldLabel : String
The label for the field. It gets appended with the labelSeparator, and its position and sizing is determined by the l...
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. Defaults to undefined.
 
formItemCls : String
A CSS class to be applied to the outermost element to denote that it is participating in the form field layout. Defau...
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'.
 
hideLabel : Boolean
Set to true to completely hide the label element (label and separator). Defaults to false. By default, even if you do...

Set to true to completely hide the label element (label and separator). Defaults to false.

By default, even if you do not specify a fieldLabel the space will still be reserved so that the field will line up with other fields that do have labels. Setting hideLabel to true will cause the field to not reserve that space.

 
invalidCls : String
The CSS class to use when marking the component invalid (defaults to 'x-form-invalid')
The CSS class to use when marking the component invalid (defaults to 'x-form-invalid')
 
labelAlign : String
Controls the position and alignment of the fieldLabel. Valid values are: "left" (the default) - The label is positio...

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.
 
labelCls : String
The CSS class to be applied to the label element. Defaults to 'x-form-item-label'.
The CSS class to be applied to the label element. Defaults to 'x-form-item-label'.
 
labelPad : Number
The amount of space in pixels between the fieldLabel and the input field. Defaults to 5.
The amount of space in pixels between the fieldLabel and the input field. Defaults to 5.
 
labelSeparator : String
Character(s) to be inserted at the end of the label text.
Character(s) to be inserted at the end of the label text.
 
labelStyle : String

A CSS style specification string to apply directly to this field's label. Defaults to undefined.

A CSS style specification string to apply directly to this field's label. Defaults to undefined.

 
labelWidth : Number
The width of the fieldLabel in pixels. Only applicable if the labelAlign is set to "left" or "right". Defaults to 100...
The width of the fieldLabel in pixels. Only applicable if the labelAlign is set to "left" or "right". Defaults to 100.
 
labelableRenderTpl : Array/String/Ext.XTemplate
The rendering template for the field decorations. Component classes using this mixin should include logic to use this...
The rendering template for the field decorations. Component classes using this mixin should include logic to use this as their renderTpl.
 
msgTarget : String
The location where the error message text should display. Must be one of the following values: <div class="mdetail-pa...

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.QuickTips.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.
  • [element id] Add the error message directly to the innerHTML of the specified element.
 
preventMark : Boolean
true to disable displaying any error message set on this object. Defaults to false.
true to disable displaying any error message set on this object. Defaults to false.

Properties

 
bodyEl : Ext.core.Element The div Element wrapping the component's contents. Only available after the component has been rendered.
 
errorEl : Ext.core.Element The div Element that will contain the component's error message(s). Note that depending on the configured {@link #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.
 
isFieldLabelable : Boolean Flag denoting that this object is labelable as a field. Always true.
 
labelEl : Ext.core.Element The label Element for this component. Only available after the component has been rendered.

Methods

 
applyFieldDefaults( Object defaults ) : Void
Applies a set of default configuration values to this Labelable instance. For each of the properties in the given obj...
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.

Parameters

  • defaults : Object
    The defaults to apply to the object.

Returns

  • Void
 
getActiveError : String
Gets the active error message for this component, if any. This does not trigger validation on its own, it merely retu...
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.
 
getInputId : String
Get the input id, if any, for this component. This is used as the "for" attribute on the label element. Implementing ...
Get the input id, if any, for this component. This is used as the "for" attribute on the label element. Implementing subclasses may also use this as e.g. the id for their own input element.
 
hasActiveError : Boolean
Tells whether the field currently has an active error message. This does not trigger validation on its own, it merely...
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.
 
initLabelable : Void
Performs initialization of this mixin. Component classes using this mixin should call this method during their own in...
Performs initialization of this mixin. Component classes using this mixin should call this method during their own initialization.
 
setActiveError( String msg ) : Void
Sets the active error message to the given string.
Sets the active error message to the given string.

Parameters

  • msg : String
    The error message

Returns

  • Void
 
unsetActiveError : Void
Clears the active error.
Clears the active error.
© 2011 Sencha Inc.