Ext JS 4.1.3 Sencha Docs

Ext.form.Labelable

Hierarchy

Ext.Base
Ext.form.Labelable

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.

Available since: 4.0.0

Defined By

Config options

Ext.form.Labelable
view source
: String
If specified, then the component will be displayed with this value as its active error when first rendered. ...

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.

Available since: 4.0.0

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.

Available since: 4.0.0

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

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.

Available since: 4.1.1

An optional string or XTemplate configuration to insert in the field markup after the label text. ...

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.

Available since: 4.1.0

An optional string or XTemplate configuration to insert in the field markup after the label element. ...

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.

Available since: 4.1.0

An optional string or XTemplate configuration to insert in the field markup after the subTpl markup. ...

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.

Available since: 4.1.0

Ext.form.Labelable
view source
: Boolean
Whether to adjust the component's body area to make room for 'side' or 'under' error messages. ...

Whether to adjust the component's body area to make room for 'side' or 'under' error messages.

Defaults to: true

Available since: 4.0.0

Ext.form.Labelable
view source
: String
The CSS class to be applied to the body content element. ...

The CSS class to be applied to the body content element.

Defaults to: Ext.baseCSSPrefix + 'form-item-body'

Available since: 4.0.0

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.

Available since: 4.1.1

An optional string or XTemplate configuration to insert in the field markup before the label text. ...

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.

Available since: 4.1.0

An optional string or XTemplate configuration to insert in the field markup before the label element. ...

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.

Available since: 4.1.0

An optional string or XTemplate configuration to insert in the field markup before the subTpl markup. ...

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.

Available since: 4.1.0

Ext.form.Labelable
view source
: 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: Ext.baseCSSPrefix + 'clear'

Available since: 4.0.0

Ext.form.Labelable
view source
: String
The CSS class to be applied to the error message element. ...

The CSS class to be applied to the error message element.

Defaults to: Ext.baseCSSPrefix + 'form-error-msg'

Available since: 4.0.0

Ext.form.Labelable
view source
: String
An extra CSS class to be applied to the body content element in addition to baseBodyCls. ...

An extra CSS class to be applied to the body content element in addition to baseBodyCls.

Defaults to: ''

Available since: 4.0.0

Ext.form.Labelable
view source
: String
The label for the field. ...

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.

Available since: 4.0.0

Ext.form.Labelable
view source
: String
A CSS class to be applied to the outermost element to denote that it is participating in the form field layout. ...

A CSS class to be applied to the outermost element to denote that it is participating in the form field layout.

Defaults to: Ext.baseCSSPrefix + 'form-item'

Available since: 4.0.0

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.

Defaults to: true

Available since: 4.0.0

Ext.form.Labelable
view source
: Boolean
Set to true to completely hide the label element (fieldLabel and labelSeparator). ...

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

Available since: 4.0.0

Ext.form.Labelable
view source
: String
The CSS class to use when marking the component invalid. ...

The CSS class to use when marking the component invalid.

Defaults to: Ext.baseCSSPrefix + 'form-invalid'

Available since: 4.0.0

Ext.form.Labelable
view source
: String
Controls the position and alignment of the fieldLabel. ...

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'

Available since: 4.0.0

An optional string or XTemplate configuration to insert in the field markup inside the label element (as attributes). ...

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.

Available since: 4.1.0

Ext.form.Labelable
view source
: String
The CSS class to be applied to the label element. ...

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: Ext.baseCSSPrefix + 'form-item-label'

Available since: 4.0.0

Ext.form.Labelable
view source
: String
An optional string of one or more additional CSS classes to add to the label element. ...

An optional string of one or more additional CSS classes to add to the label element. Defaults to empty.

Available since: 4.0.4

Ext.form.Labelable
view source
: Number
The amount of space in pixels between the fieldLabel and the input field. ...

The amount of space in pixels between the fieldLabel and the input field.

Defaults to: 5

Available since: 4.0.0

Ext.form.Labelable
view source
: 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.

Set to empty string to hide the separator completely.

Defaults to: ':'

Available since: 4.0.0

Ext.form.Labelable
view source
: String

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

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

Available since: 4.0.0

Ext.form.Labelable
view source
: Number
The width of the fieldLabel in pixels. ...

The width of the fieldLabel in pixels. Only applicable if the labelAlign is set to "left" or "right".

Defaults to: 100

Available since: 4.0.0

The rendering template for the field decorations. ...

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}]

Available since: 4.0.0

Ext.form.Labelable
view source
: String
The location where the error message text should display. ...

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'

Available since: 4.0.0

Ext.form.Labelable
view source
: Boolean
true to disable displaying any error message set on this object. ...

true to disable displaying any error message set on this object.

Defaults to: false

Available since: 4.0.0

Properties

Defined By

Instance properties

...

Defaults to: 'Ext.Base'

Available since: 4.1.1

Ext.form.Labelable
view source
: Objectprivate
...

Defaults to: {tag: 'table', cellpadding: 0}

Available since: 4.1.0

Ext.form.Labelable
view source
: Ext.Element
The div Element wrapping the component's contents. ...

The div Element wrapping the component's contents. Only available after the component has been rendered.

Available since: 4.0.0

Ext.form.Labelable
view source
: Arrayprivate
...

Defaults to: ['labelCell', 'labelEl', 'bodyEl', 'sideErrorCell', 'errorEl', 'inputRow', 'bottomPlaceHolder']

Available since: 4.1.0

Overrides: Ext.util.ElementContainer.childEls

...

Defaults to: {}

Available since: 4.1.1

Ext.form.Labelable
view source
: Ext.Element
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.0.0

Ext.form.Labelable
view source
: Arrayprivate
...

Defaults to: ['<tpl if="errors && errors.length">', '<ul><tpl for="errors"><li>{.}</li></tpl></ul>', '</tpl>']

Available since: 4.1.2

...

Defaults to: []

Available since: 4.1.1

...

Defaults to: {}

Available since: 4.1.1

Flag denoting that this object is labelable as a field. ...

Flag denoting that this object is labelable as a field. Always true.

Defaults to: true

Available since: 4.0.0

...

Defaults to: true

Available since: 4.1.1

Ext.form.Labelable
view source
: Ext.Element
The <TD> Element which contains the label Element for this component. ...

The <TD> Element which contains the label Element for this component. Only available after the component has been rendered.

Available since: 4.1.0

Ext.form.Labelable
view source
: Ext.Element
The label Element for this component. ...

The label Element for this component. Only available after the component has been rendered.

Available since: 4.0.0

Ext.form.Labelable
view source
: Arrayprivate
...

Defaults to: ['beforeBodyEl', 'afterBodyEl', 'beforeLabelTpl', 'afterLabelTpl', 'beforeSubTpl', 'afterSubTpl', 'beforeLabelTextTpl', 'afterLabelTextTpl', 'labelAttrTpl']

Available since: 4.1.0

Ext.form.Labelable
view source
: Arrayprivate
This is an array to avoid a split on every call to Ext.copyTo ...

This is an array to avoid a split on every call to Ext.copyTo

Defaults to: ['allowBlank', 'id', 'labelAlign', 'fieldBodyCls', 'baseBodyCls', 'clearCls', 'labelSeparator', 'msgTarget']

Available since: 4.1.0

Ext.form.Labelable
view source
: Booleanprivate
Tells the layout system that the height can be measured immediately because the width does not need setting. ...

Tells the layout system that the height can be measured immediately because the width does not need setting.

Defaults to: true

Available since: 4.1.0

Ext.form.Labelable
view source
: Arrayprivate
...

Defaults to: ['<tpl if="errors && errors.length">', '<tpl for="errors"><tpl if="xindex &gt; 1">\n</tpl>{.}</tpl>', '</tpl>']

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

Ext.define('My.Cat', {
    statics: {
        speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
    },

    constructor: function() {
        alert(this.self.speciesName); // dependent on 'this'
    },

    clone: function() {
        return new this.self();
    }
});


Ext.define('My.SnowLeopard', {
    extend: 'My.Cat',
    statics: {
        speciesName: 'Snow Leopard'         // My.SnowLeopard.speciesName = 'Snow Leopard'
    }
});

var cat = new My.Cat();                     // alerts 'Cat'
var snowLeopard = new My.SnowLeopard();     // alerts 'Snow Leopard'

var clone = snowLeopard.clone();
alert(Ext.getClassName(clone));             // alerts 'My.SnowLeopard'

Available since: 4.0.0

Defined By

Static properties

...

Defaults to: []

Available since: 4.1.1

Methods

Defined By

Instance methods

Ext.form.Labelable
view source
( )private
...

Available since: 4.1.0

Fires

    ( args ) : Objectdeprecatedprotected
    Call the original method that was previously overridden with override Ext.define('My.Cat', { constructor: functi...

    Call the original method that was previously overridden with override

    Ext.define('My.Cat', {
        constructor: function() {
            alert("I'm a cat!");
        }
    });
    
    My.Cat.override({
        constructor: function() {
            alert("I'm going to be a cat!");
    
            this.callOverridden();
    
            alert("Meeeeoooowwww");
        }
    });
    
    var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
                              // alerts "I'm a cat!"
                              // alerts "Meeeeoooowwww"
    

    Available since: 4.0.0

    This method has been deprecated

    as of 4.1. Use callParent instead.

    Parameters

    • args : Array/Arguments

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

    Returns

    • Object

      Returns the result of calling the overridden method

    Call the "parent" method of the current method. ...

    Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see Ext.define).

     Ext.define('My.Base', {
         constructor: function (x) {
             this.x = x;
         },
    
         statics: {
             method: function (x) {
                 return x;
             }
         }
     });
    
     Ext.define('My.Derived', {
         extend: 'My.Base',
    
         constructor: function () {
             this.callParent([21]);
         }
     });
    
     var obj = new My.Derived();
    
     alert(obj.x);  // alerts 21
    

    This can be used with an override as follows:

     Ext.define('My.DerivedOverride', {
         override: 'My.Derived',
    
         constructor: function (x) {
             this.callParent([x*2]); // calls original My.Derived constructor
         }
     });
    
     var obj = new My.Derived();
    
     alert(obj.x);  // now alerts 42
    

    This also works with static methods.

     Ext.define('My.Derived2', {
         extend: 'My.Base',
    
         statics: {
             method: function (x) {
                 return this.callParent([x*2]); // calls My.Base.method
             }
         }
     });
    
     alert(My.Base.method(10);     // alerts 10
     alert(My.Derived2.method(10); // alerts 20
    

    Lastly, it also works with overridden static methods.

     Ext.define('My.Derived2Override', {
         override: 'My.Derived2',
    
         statics: {
             method: function (x) {
                 return this.callParent([x*2]); // calls My.Derived2.method
             }
         }
     });
    
     alert(My.Derived2.method(10); // now alerts 40
    

    To override a method and replace it and also call the superclass method, use callSuper. This is often done to patch a method to fix a bug.

    Available since: 4.0.0

    Parameters

    • args : Array/Arguments

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

    Returns

    • Object

      Returns the result of calling the parent method

    ( args ) : Objectprotected
    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.

    Consider:

     Ext.define('Ext.some.Class', {
         method: function () {
             console.log('Good');
         }
     });
    
     Ext.define('Ext.some.DerivedClass', {
         method: function () {
             console.log('Bad');
    
             // ... logic but with a bug ...
    
             this.callParent();
         }
     });
    

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

     Ext.define('App.paches.DerivedClass', {
         override: 'Ext.some.DerivedClass',
    
         method: function () {
             console.log('Fixed');
    
             // ... logic but with bug fixed ...
    
             this.callSuper();
         }
     });
    

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

    Available since: Ext JS 4.1.3

    Parameters

    • args : Array/Arguments

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

    Returns

    • Object

      Returns the result of calling the superclass method

    ...

    Available since: 4.1.1

    Ext.form.Labelable
    view source
    ( ) : String
    Gets the active error message for this component, if any. ...

    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.

    Available since: 4.0.0

    Returns

    • String

      The active error message on the component; if there is no error, an empty string is returned.

    Ext.form.Labelable
    view source
    ( ) : String[]
    Gets an Array of any active error messages currently applied to the field. ...

    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.

    Available since: 4.0.0

    Returns

    • String[]

      The active error messages on the component; if there are no errors, an empty Array is returned.

    Ext.form.Labelable
    view source
    ( )private
    Calculates the colspan value for the body cell - the cell which contains the input field. ...

    Calculates the colspan value for the body cell - the cell which contains the input field.

    The field table structure contains 4 columns:

    Available since: 4.1.0

    Fires

      ...

      Available since: 4.1.0

      Parameters

      Ext.form.Labelable
      view source
      ( )private
      ...

      Available since: 4.1.1

      Ext.form.Labelable
      view source
      ( ) : Stringtemplate
      Returns the label for the field. ...

      Returns the label for the field. Defaults to simply returning the fieldLabel config. Can be overridden to provide a custom generated label.

      Available since: 4.0.0

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

      Returns

      • String

        The configured field label, or empty string if not defined

      Fires

        Returns the initial configuration passed to constructor when instantiating this class. ...

        Returns the initial configuration passed to constructor when instantiating this class.

        Available since: 4.1.0

        Parameters

        • name : String (optional)

          Name of the config option to return.

        Returns

        • Object/Mixed

          The full config object or a single config value when name parameter specified.

        Ext.form.Labelable
        view source
        ( ) : String
        Get the input id, if any, for this component. ...

        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.

        Available since: 4.0.0

        Returns

        Ext.form.Labelable
        view source
        ( data, names )private
        ...

        Available since: 4.1.0

        Parameters

        Ext.form.Labelable
        view source
        ( )private
        ...

        Available since: 4.1.0

        Ext.form.Labelable
        view source
        ( )private
        ...

        Available since: 4.1.0

        Ext.form.Labelable
        view source
        ( )private
        ...

        Available since: 4.1.0

        Ext.form.Labelable
        view source
        ( ) : Stringprivate
        Gets any label styling for the labelEl ...

        Gets any label styling for the labelEl

        Available since: 4.1.0

        Returns

        Ext.form.Labelable
        view source
        ( ) : Number
        Gets the width of the label (if visible) ...

        Gets the width of the label (if visible)

        Available since: Ext JS 4.1.3

        Returns

        Fires

          Ext.form.Labelable
          view source
          ( ) : Objectprotected
          Generates the arguments for the field decorations rendering template. ...

          Generates the arguments for the field decorations rendering template.

          Available since: 4.0.0

          Returns

          Fires

            Ext.form.Labelable
            view source
            ( ) : Stringprotected
            Gets the markup to be inserted into the outer template's bodyEl. ...

            Gets the markup to be inserted into the outer template's bodyEl. Defaults to empty string, should be implemented by classes including this mixin as needed.

            Available since: 4.0.0

            Returns

            • String

              The markup to be inserted

            Ext.form.Labelable
            view source
            ( ) : Boolean
            Tells whether the field currently has an active error message. ...

            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.

            Available since: 4.0.0

            Returns

            Fires

              ...

              Available since: 4.1.0

              Parameters

              Ext.form.Labelable
              view source
              ( ) : Boolean
              Checks if the field has a visible label ...

              Checks if the field has a visible label

              Available since: 4.1.0

              Returns

              • Boolean

                True if the field has a visible label

              Fires

                ( config ) : Ext.Basechainableprotected
                Initialize configuration for this class. ...

                Initialize configuration for this class. a typical example:

                Ext.define('My.awesome.Class', {
                    // The default config
                    config: {
                        name: 'Awesome',
                        isAwesome: true
                    },
                
                    constructor: function(config) {
                        this.initConfig(config);
                    }
                });
                
                var awesome = new My.awesome.Class({
                    name: 'Super Awesome'
                });
                
                alert(awesome.getName()); // 'Super Awesome'
                

                Available since: 4.0.0

                Parameters

                Returns

                Ext.form.Labelable
                view source
                ( )
                Performs initialization of this mixin. ...

                Performs initialization of this mixin. Component classes using this mixin should call this method during their own initialization.

                Available since: 4.0.0

                Fires

                  ( names, callback, scope )private
                  ...

                  Available since: 4.1.0

                  Parameters

                  Ext.form.Labelable
                  view source
                  ( )private
                  ...

                  Available since: 4.0.5

                  Ext.form.Labelable
                  view source
                  ( )private
                  Updates the rendered DOM to match the current activeError. ...

                  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

                  Ext.form.Labelable
                  view source
                  ( msg )
                  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

                  • msg : String

                    The error message

                  Fires

                    Ext.form.Labelable
                    view source
                    ( errors )
                    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

                    • errors : String[]

                      The error messages

                    Fires

                      ( config, applyIfNotSet ) : Ext.Basechainableprivate
                      ...

                      Available since: 4.0.0

                      Parameters

                      Returns

                      Ext.form.Labelable
                      view source
                      ( defaults )
                      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.

                      Available since: 4.0.0

                      Parameters

                      • defaults : Object

                        The defaults to apply to the object.

                      Fires

                        Ext.form.Labelable
                        view source
                        ( label )
                        Set the label of this field. ...

                        Set the label of this field.

                        Available since: 4.1.0

                        Parameters

                        • label : String

                          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

                          Ext.define('My.Cat', {
                              statics: {
                                  totalCreated: 0,
                                  speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
                              },
                          
                              constructor: function() {
                                  var statics = this.statics();
                          
                                  alert(statics.speciesName);     // always equals to 'Cat' no matter what 'this' refers to
                                                                  // equivalent to: My.Cat.speciesName
                          
                                  alert(this.self.speciesName);   // dependent on 'this'
                          
                                  statics.totalCreated++;
                              },
                          
                              clone: function() {
                                  var cloned = new this.self;                      // dependent on 'this'
                          
                                  cloned.groupName = this.statics().speciesName;   // equivalent to: My.Cat.speciesName
                          
                                  return cloned;
                              }
                          });
                          
                          
                          Ext.define('My.SnowLeopard', {
                              extend: 'My.Cat',
                          
                              statics: {
                                  speciesName: 'Snow Leopard'     // My.SnowLeopard.speciesName = 'Snow Leopard'
                              },
                          
                              constructor: function() {
                                  this.callParent();
                              }
                          });
                          
                          var cat = new My.Cat();                 // alerts 'Cat', then alerts 'Cat'
                          
                          var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'
                          
                          var clone = snowLeopard.clone();
                          alert(Ext.getClassName(clone));         // alerts 'My.SnowLeopard'
                          alert(clone.groupName);                 // alerts 'Cat'
                          
                          alert(My.Cat.totalCreated);             // alerts 3
                          

                          Available since: 4.0.0

                          Returns

                          Ext.form.Labelable
                          view source
                          ( ) : String
                          Returns the trimmed label by slicing off the label separator character. ...

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

                          Available since: 4.1.1

                          Returns

                          • String

                            The trimmed field label, or empty string if not defined

                          Ext.form.Labelable
                          view source
                          ( )
                          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.

                          Available since: 4.0.0

                          Fires

                            Defined By

                            Static methods

                            ( config )privatestatic
                            ...

                            Available since: 4.1.1

                            Parameters

                            ( members )chainableprivatestatic
                            ...

                            Available since: 4.1.1

                            Parameters

                            ( name, member )chainableprivatestatic
                            ...

                            Available since: 4.1.1

                            Parameters

                            ( members )chainablestatic
                            Add methods / properties to the prototype of this class. ...

                            Add methods / properties to the prototype of this class.

                            Ext.define('My.awesome.Cat', {
                                constructor: function() {
                                    ...
                                }
                            });
                            
                             My.awesome.Cat.addMembers({
                                 meow: function() {
                                    alert('Meowww...');
                                 }
                             });
                            
                             var kitty = new My.awesome.Cat;
                             kitty.meow();
                            

                            Available since: 4.1.0

                            Parameters

                            ( members ) : Ext.Basechainablestatic
                            Add / override static properties of this class. ...

                            Add / override static properties of this class.

                            Ext.define('My.cool.Class', {
                                ...
                            });
                            
                            My.cool.Class.addStatics({
                                someProperty: 'someValue',      // My.cool.Class.someProperty = 'someValue'
                                method1: function() { ... },    // My.cool.Class.method1 = function() { ... };
                                method2: function() { ... }     // My.cool.Class.method2 = function() { ... };
                            });
                            

                            Available since: 4.0.2

                            Parameters

                            Returns

                            ( xtype )chainableprivatestatic
                            ...

                            Available since: 4.1.1

                            Parameters

                            ( fromClass, members ) : Ext.Basechainableprivatestatic
                            Borrow another class' members to the prototype of this class. ...

                            Borrow another class' members to the prototype of this class.

                            Ext.define('Bank', {
                                money: '$$$',
                                printMoney: function() {
                                    alert('$$$$$$$');
                                }
                            });
                            
                            Ext.define('Thief', {
                                ...
                            });
                            
                            Thief.borrow(Bank, ['money', 'printMoney']);
                            
                            var steve = new Thief();
                            
                            alert(steve.money); // alerts '$$$'
                            steve.printMoney(); // alerts '$$$$$$$'
                            

                            Available since: 4.0.2

                            Parameters

                            • fromClass : Ext.Base

                              The class to borrow members from

                            • members : Array/String

                              The names of the members to borrow

                            Returns

                            Create a new instance of this Class. ...

                            Create a new instance of this Class.

                            Ext.define('My.cool.Class', {
                                ...
                            });
                            
                            My.cool.Class.create({
                                someConfig: true
                            });
                            

                            All parameters are passed to the constructor of the class.

                            Available since: 4.0.2

                            Returns

                            Overrides: Ext.layout.Layout.create

                            ( alias, origin )static
                            Create aliases for existing prototype methods. ...

                            Create aliases for existing prototype methods. Example:

                            Ext.define('My.cool.Class', {
                                method1: function() { ... },
                                method2: function() { ... }
                            });
                            
                            var test = new My.cool.Class();
                            
                            My.cool.Class.createAlias({
                                method3: 'method1',
                                method4: 'method2'
                            });
                            
                            test.method3(); // test.method1()
                            
                            My.cool.Class.createAlias('method5', 'method3');
                            
                            test.method5(); // test.method3() -> test.method1()
                            

                            Available since: 4.0.2

                            Parameters

                            ( config )privatestatic
                            ...

                            Available since: 4.1.1

                            Parameters

                            Get the current class' name in string format. ...

                            Get the current class' name in string format.

                            Ext.define('My.cool.Class', {
                                constructor: function() {
                                    alert(this.self.getName()); // alerts 'My.cool.Class'
                                }
                            });
                            
                            My.cool.Class.getName(); // 'My.cool.Class'
                            

                            Available since: 4.0.4

                            Returns

                            ( )deprecatedstatic
                            Adds members to class. ...

                            Adds members to class.

                            Available since: 4.0.2

                            This method has been deprecated since 4.1

                            Use addMembers instead.

                            ( name, mixinClass )chainableprivatestatic
                            Used internally by the mixins pre-processor ...

                            Used internally by the mixins pre-processor

                            Available since: 4.1.1

                            Parameters

                            ( fn, scope )chainableprivatestatic
                            ...

                            Available since: 4.1.1

                            Parameters

                            ( members ) : Ext.Basechainabledeprecatedstatic
                            Override members of this class. ...

                            Override members of this class. Overridden methods can be invoked via callParent.

                            Ext.define('My.Cat', {
                                constructor: function() {
                                    alert("I'm a cat!");
                                }
                            });
                            
                            My.Cat.override({
                                constructor: function() {
                                    alert("I'm going to be a cat!");
                            
                                    this.callParent(arguments);
                            
                                    alert("Meeeeoooowwww");
                                }
                            });
                            
                            var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
                                                      // alerts "I'm a cat!"
                                                      // alerts "Meeeeoooowwww"
                            

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

                            Ext.define('My.CatOverride', {
                                override: 'My.Cat',
                                constructor: function() {
                                    alert("I'm going to be a cat!");
                            
                                    this.callParent(arguments);
                            
                                    alert("Meeeeoooowwww");
                                }
                            });
                            

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

                            Available since: 4.0.2

                            This method has been deprecated since 4.1.0

                            Use Ext.define instead

                            Parameters

                            • members : Object

                              The properties to add to this class. This should be specified as an object literal containing one or more properties.

                            Returns

                            ...

                            Available since: 4.1.1

                            Defined By

                            Events

                            Ext.form.Labelable
                            view source
                            ( this, error, eOpts )
                            Fires when the active error message is changed via setActiveError. ...

                            Fires when the active error message is changed via setActiveError.

                            Available since: 4.0.0

                            Parameters