Ext.form.Labelable

Hierarchy

Requires

Mixed into

Files

A mixin which allows a component to be configured and decorated with a label and/or error message as is
common for form fields. This is used by e.g. Ext.form.field.Base and Ext.form.FieldContainer
to let them be managed by the Field layout.

NOTE: This mixin is mainly for internal library use and most users should not need to use it directly. It
is more likely you will want to use one of the component classes that import this mixin, such as
Ext.form.field.Base or Ext.form.FieldContainer.

Use of this mixin does not make a component a field in the logical sense, meaning it does not provide any
logic or state related to values or validation; that is handled by the related Ext.form.field.Field
mixin. These two mixins may be used separately (for example Ext.form.FieldContainer is Labelable but not a
Field), or in combination (for example Ext.form.field.Base implements both and has logic for connecting the
two.)

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.

The template used to format the Array of error messages passed to setActiveErrors into a single HTML
string. ...

The template used to format the Array of error messages passed to setActiveErrors into a single HTML
string. if the msgTarget is title, it defaults to a list separated by new lines. Otherwise, it
renders each message as an item in an unordered list.

An optional string or XTemplate configuration to insert in the field markup
at the beginning of the input containing ...

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.

When set to true, the label element (fieldLabel and labelSeparator) will be automatically
hidden if the fieldLabel is...

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.

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.

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

Available since: 4.1.0

...

Defaults to: {}

Available since: 4.1.1

The div Element that will contain the component's error message(s). ...

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.

...

Available since: 4.1.2

Get the reference to the current class from which this object was instantiated. ...

Get the reference to the current class from which this object was instantiated. Unlike statics,
this.self is scope-dependent and it's meant to be used for dynamic inheritance. See statics
for a detailed comparison

The arguments, either an array or the arguments object
from the current method, for example: this.callParent(arguments)

Returns

Returns the result of calling the parent method

This method is used by an override to call the superclass method but bypass any
overridden method. ...

This method is used by an override to call the superclass method but bypass any
overridden method. This is often done to "patch" a method that contains a bug
but for whatever reason cannot be fixed directly.

To patch the bug in DerivedClass.method, the typical solution is to create an
override:

The patch method cannot use callParent to call the superclass method since
that would call the overridden method containing the bug. In other words, the
above patch would only produce "Fixed" then "Good" in the console log, whereas,
using callParent would produce "Fixed" then "Bad" then "Good".

Updates the rendered DOM to match the current activeError. This only updates the content and
attributes, you'll have to call doComponentLayout to actually update the display.

Available since: 4.0.0

Fires

Sets the active error message to the given string. ...

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.

Available since: 4.0.0

Parameters

The error message

Fires

Set the active error message to an Array of error messages. ...

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.

...

Available since: 4.0.0

Parameters

Returns

this

Applies a set of default configuration values to this Labelable instance. ...

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.

Set the label of this field.

Available since: 4.1.0

Parameters

The new label. The labelSeparator will be automatically appended to the label
string.

Fires

Get the reference to the class from which this object was instantiated. ...

Get the reference to the class from which this object was instantiated. Note that unlike self,
this.statics() is scope-independent and it always returns the class from which it was called, regardless of what
this points to during run-time

Returns the trimmed label by slicing off the label separator character. Can be overridden.

Available since: 4.1.1

Returns

The trimmed field label, or empty string if not defined

Clears the active error message(s). ...

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.

As of 4.1, direct use of this method is deprecated. Use Ext.define
instead:

The above accomplishes the same result but can be managed by the Ext.Loader
which can properly order the override and its target class and the build process
can determine whether the override is needed based on the required state of the
target class (My.Cat).