lixinru
/
YtIoT


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837
							<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='Ext-form-Labelable'>/**
</span> * 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 {@link #initLabelable} method during component initialization to ensure the mixin gets
 * set up correctly.
 *
 * @docauthor Jason Johnston &lt;jason@sencha.com&gt;
 */
Ext.define(&quot;Ext.form.Labelable&quot;, {
    requires: ['Ext.XTemplate'],

    autoEl: {
        tag: 'table',
        cellpadding: 0
    },

    childEls: [
<span id='Ext-form-Labelable-property-labelCell'>        /**
</span>         * @property {Ext.Element} labelCell
         * The `&lt;TD&gt;` Element which contains the label Element for this component. Only available after the component has been rendered.
         */
        'labelCell',

<span id='Ext-form-Labelable-property-labelEl'>        /**
</span>         * @property {Ext.Element} labelEl
         * The label Element for this component. Only available after the component has been rendered.
         */
        'labelEl',

<span id='Ext-form-Labelable-property-bodyEl'>        /**
</span>         * @property {Ext.Element} bodyEl
         * The div Element wrapping the component's contents. Only available after the component has been rendered.
         */
        'bodyEl',

        // private - the TD which contains the msgTarget: 'side' error icon
        'sideErrorCell',

<span id='Ext-form-Labelable-property-errorEl'>        /**
</span>         * @property {Ext.Element} errorEl
         * 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.
         */
        'errorEl',

        'inputRow',

        'bottomPlaceHolder'
    ],

<span id='Ext-form-Labelable-cfg-labelableRenderTpl'>    /**
</span>     * @cfg {String/String[]/Ext.XTemplate} labelableRenderTpl
     * The rendering template for the field decorations. Component classes using this mixin
     * should include logic to use this as their {@link Ext.AbstractComponent#renderTpl renderTpl},
     * and implement the {@link #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 {@link #labelAlign} because when
     * rendered into a {@link 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 {@link Ext.layout.container.Form} layout, different
     * settings of {@link #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.
     * @private
     */
    labelableRenderTpl: [

        // body row. If a heighted Field (eg TextArea, HtmlEditor, this must greedily consume height.
        '&lt;tr id=&quot;{id}-inputRow&quot; &lt;tpl if=&quot;inFormLayout&quot;&gt;id=&quot;{id}&quot;&lt;/tpl&gt;&gt;',

            // Label cell
            '&lt;tpl if=&quot;labelOnLeft&quot;&gt;',
                '&lt;td id=&quot;{id}-labelCell&quot; style=&quot;{labelCellStyle}&quot; {labelCellAttrs}&gt;',
                    '{beforeLabelTpl}',
                    '&lt;label id=&quot;{id}-labelEl&quot; {labelAttrTpl}&lt;tpl if=&quot;inputId&quot;&gt; for=&quot;{inputId}&quot;&lt;/tpl&gt; class=&quot;{labelCls}&quot;',
                        '&lt;tpl if=&quot;labelStyle&quot;&gt; style=&quot;{labelStyle}&quot;&lt;/tpl&gt;&gt;',
                        '{beforeLabelTextTpl}',
                        '&lt;tpl if=&quot;fieldLabel&quot;&gt;{fieldLabel}{labelSeparator}&lt;/tpl&gt;',
                        '{afterLabelTextTpl}',
                    '&lt;/label&gt;',
                    '{afterLabelTpl}',
                '&lt;/td&gt;',
            '&lt;/tpl&gt;',

            // Body of the input. That will be an input element, or, from a TriggerField, a table containing an input cell and trigger cell(s)
            '&lt;td class=&quot;{baseBodyCls} {fieldBodyCls}&quot; id=&quot;{id}-bodyEl&quot; colspan=&quot;{bodyColspan}&quot; role=&quot;presentation&quot;&gt;',
                '{beforeBodyEl}',

                // Label just sits on top of the input field if labelAlign === 'top'
                '&lt;tpl if=&quot;labelAlign==\'top\'&quot;&gt;',
                    '{beforeLabelTpl}',
                    '&lt;div id=&quot;{id}-labelCell&quot; style=&quot;{labelCellStyle}&quot;&gt;',
                        '&lt;label id=&quot;{id}-labelEl&quot; {labelAttrTpl}&lt;tpl if=&quot;inputId&quot;&gt; for=&quot;{inputId}&quot;&lt;/tpl&gt; class=&quot;{labelCls}&quot;',
                            '&lt;tpl if=&quot;labelStyle&quot;&gt; style=&quot;{labelStyle}&quot;&lt;/tpl&gt;&gt;',
                            '{beforeLabelTextTpl}',
                            '&lt;tpl if=&quot;fieldLabel&quot;&gt;{fieldLabel}{labelSeparator}&lt;/tpl&gt;',
                            '{afterLabelTextTpl}',
                        '&lt;/label&gt;',
                    '&lt;/div&gt;',
                    '{afterLabelTpl}',
                '&lt;/tpl&gt;',

                '{beforeSubTpl}',
                '{[values.$comp.getSubTplMarkup()]}',
                '{afterSubTpl}',

            // Final TD. It's a side error element unless there's a floating external one
            '&lt;tpl if=&quot;msgTarget===\'side\'&quot;&gt;',
                '{afterBodyEl}',
                '&lt;/td&gt;',
                '&lt;td id=&quot;{id}-sideErrorCell&quot; vAlign=&quot;{[values.labelAlign===\'top\' &amp;&amp; !values.hideLabel ? \'bottom\' : \'middle\']}&quot; style=&quot;{[values.autoFitErrors ? \'display:none\' : \'\']}&quot; width=&quot;{errorIconWidth}&quot;&gt;',
                    '&lt;div id=&quot;{id}-errorEl&quot; class=&quot;{errorMsgCls}&quot; style=&quot;display:none;width:{errorIconWidth}px&quot;&gt;&lt;/div&gt;',
                '&lt;/td&gt;',
            '&lt;tpl elseif=&quot;msgTarget==\'under\'&quot;&gt;',
                '&lt;div id=&quot;{id}-errorEl&quot; class=&quot;{errorMsgClass}&quot; colspan=&quot;2&quot; style=&quot;display:none&quot;&gt;&lt;/div&gt;',
                '{afterBodyEl}',
                '&lt;/td&gt;',
            '&lt;/tpl&gt;',

        '&lt;/tr&gt;',
        {
            disableFormats: true
        }
    ],

<span id='Ext-form-Labelable-cfg-activeErrorsTpl'>    /**
</span>     * @cfg {String/String[]/Ext.XTemplate} activeErrorsTpl
     * The template used to format the Array of error messages passed to {@link #setActiveErrors} into a single HTML
     * string. By default this renders each message as an item in an unordered list.
     */
    activeErrorsTpl: [
        '&lt;tpl if=&quot;errors &amp;&amp; errors.length&quot;&gt;',
            '&lt;ul&gt;&lt;tpl for=&quot;errors&quot;&gt;&lt;li&gt;{.}&lt;/li&gt;&lt;/tpl&gt;&lt;/ul&gt;',
        '&lt;/tpl&gt;'
    ],

<span id='Ext-form-Labelable-property-isFieldLabelable'>    /**
</span>     * @property {Boolean} isFieldLabelable
     * Flag denoting that this object is labelable as a field. Always true.
     */
    isFieldLabelable: true,

<span id='Ext-form-Labelable-cfg-formItemCls'>    /**
</span>     * @cfg {String} formItemCls
     * A CSS class to be applied to the outermost element to denote that it is participating in the form field layout.
     */
    formItemCls: Ext.baseCSSPrefix + 'form-item',

<span id='Ext-form-Labelable-cfg-labelCls'>    /**
</span>     * @cfg {String} 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 {@link #labelAlign}. To add
     * additional classes, use {@link #labelClsExtra}.
     */
    labelCls: Ext.baseCSSPrefix + 'form-item-label',

<span id='Ext-form-Labelable-cfg-labelClsExtra'>    /**
</span>     * @cfg {String} labelClsExtra
     * An optional string of one or more additional CSS classes to add to the label element. Defaults to empty.
     */

<span id='Ext-form-Labelable-cfg-errorMsgCls'>    /**
</span>     * @cfg {String} errorMsgCls
     * The CSS class to be applied to the error message element.
     */
    errorMsgCls: Ext.baseCSSPrefix + 'form-error-msg',

<span id='Ext-form-Labelable-cfg-baseBodyCls'>    /**
</span>     * @cfg {String} baseBodyCls
     * The CSS class to be applied to the body content element.
     */
    baseBodyCls: Ext.baseCSSPrefix + 'form-item-body',

<span id='Ext-form-Labelable-cfg-fieldBodyCls'>    /**
</span>     * @cfg {String} fieldBodyCls
     * An extra CSS class to be applied to the body content element in addition to {@link #baseBodyCls}.
     */
    fieldBodyCls: '',

<span id='Ext-form-Labelable-cfg-clearCls'>    /**
</span>     * @cfg {String} clearCls
     * The CSS class to be applied to the special clearing div rendered directly after the field contents wrapper to
     * provide field clearing.
     */
    clearCls: Ext.baseCSSPrefix + 'clear',

<span id='Ext-form-Labelable-cfg-invalidCls'>    /**
</span>     * @cfg {String} invalidCls
     * The CSS class to use when marking the component invalid.
     */
    invalidCls : Ext.baseCSSPrefix + 'form-invalid',

<span id='Ext-form-Labelable-cfg-fieldLabel'>    /**
</span>     * @cfg {String} fieldLabel
     * The label for the field. It gets appended with the {@link #labelSeparator}, and its position and sizing is
     * determined by the {@link #labelAlign}, {@link #labelWidth}, and {@link #labelPad} configs.
     */
    fieldLabel: undefined,

<span id='Ext-form-Labelable-cfg-labelAlign'>    /**
</span>     * @cfg {String} labelAlign
     * Controls the position and alignment of the {@link #fieldLabel}. Valid values are:
     *
     *   - &quot;left&quot; (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 {@link #labelWidth} config.
     *   - &quot;top&quot; - The label is positioned above the field.
     *   - &quot;right&quot; - The label is positioned to the left of the field, with its text aligned to the right.
     *     Its width is determined by the {@link #labelWidth} config.
     */
    labelAlign : 'left',

<span id='Ext-form-Labelable-cfg-labelWidth'>    /**
</span>     * @cfg {Number} labelWidth
     * The width of the {@link #fieldLabel} in pixels. Only applicable if the {@link #labelAlign} is set to &quot;left&quot; or
     * &quot;right&quot;.
     */
    labelWidth: 100,

<span id='Ext-form-Labelable-cfg-labelPad'>    /**
</span>     * @cfg {Number} labelPad
     * The amount of space in pixels between the {@link #fieldLabel} and the input field.
     */
    labelPad : 5,

    //&lt;locale&gt;
<span id='Ext-form-Labelable-cfg-labelSeparator'>    /**
</span>     * @cfg {String} labelSeparator
     * Character(s) to be inserted at the end of the {@link #fieldLabel label text}.
     *
     * Set to empty string to hide the separator completely.
     */
    labelSeparator : ':',
    //&lt;/locale&gt;

<span id='Ext-form-Labelable-cfg-labelStyle'>    /**
</span>     * @cfg {String} labelStyle
     * A CSS style specification string to apply directly to this field's label.
     */

<span id='Ext-form-Labelable-cfg-hideLabel'>    /**
</span>     * @cfg {Boolean} hideLabel
     * Set to true to completely hide the label element ({@link #fieldLabel} and {@link #labelSeparator}). Also see
     * {@link #hideEmptyLabel}, which controls whether space will be reserved for an empty fieldLabel.
     */
    hideLabel: false,

<span id='Ext-form-Labelable-cfg-hideEmptyLabel'>    /**
</span>     * @cfg {Boolean} hideEmptyLabel
     * When set to true, the label element ({@link #fieldLabel} and {@link #labelSeparator}) will be automatically
     * hidden if the {@link #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
     * {@link #hideLabel} config to true.
     */
    hideEmptyLabel: true,

<span id='Ext-form-Labelable-cfg-preventMark'>    /**
</span>     * @cfg {Boolean} preventMark
     * true to disable displaying any {@link #setActiveError error message} set on this object.
     */
    preventMark: false,

<span id='Ext-form-Labelable-cfg-autoFitErrors'>    /**
</span>     * @cfg {Boolean} autoFitErrors
     * Whether to adjust the component's body area to make room for 'side' or 'under' {@link #msgTarget error messages}.
     */
    autoFitErrors: true,

<span id='Ext-form-Labelable-cfg-msgTarget'>    /**
</span>     * @cfg {String} 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.
     *
     *     **{@link 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.
     */
    msgTarget: 'qtip',

<span id='Ext-form-Labelable-cfg-activeError'>    /**
</span>     * @cfg {String} activeError
     * If specified, then the component will be displayed with this value as its active error when first rendered. Use
     * {@link #setActiveError} or {@link #unsetActiveError} to change it after component creation.
     */

<span id='Ext-form-Labelable-property-noWrap'>    /**
</span>     * @private
     * Tells the layout system that the height can be measured immediately because the width does not need setting.
     */
    noWrap: true,

    labelableInsertions: [

<span id='Ext-form-Labelable-cfg-beforeBodyEl'>        /**
</span>         * @cfg {String/Array/Ext.XTemplate} 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 {@link Ext.AbstractComponent#renderData render data}
         * serves as the context.
         */
        'beforeBodyEl',

<span id='Ext-form-Labelable-cfg-afterBodyEl'>        /**
</span>         * @cfg {String/Array/Ext.XTemplate} 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 {@link Ext.AbstractComponent#renderData render data}
         * serves as the context.
         */
        'afterBodyEl',

<span id='Ext-form-Labelable-cfg-beforeLabelTpl'>        /**
</span>         * @cfg {String/Array/Ext.XTemplate} 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 {@link Ext.AbstractComponent#renderData render data}
         * serves as the context.
         */
        'beforeLabelTpl',

<span id='Ext-form-Labelable-cfg-afterLabelTpl'>        /**
</span>         * @cfg {String/Array/Ext.XTemplate} 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 {@link Ext.AbstractComponent#renderData render data}
         * serves as the context.
         */
        'afterLabelTpl',

<span id='Ext-form-Labelable-cfg-beforeSubTpl'>        /**
</span>         * @cfg {String/Array/Ext.XTemplate} beforeSubTpl
         * An optional string or `XTemplate` configuration to insert in the field markup
         * before the {@link #getSubTplMarkup subTpl markup}. If an `XTemplate` is used, the
         * component's {@link Ext.AbstractComponent#renderData render data} serves as the context.
         */
        'beforeSubTpl',

<span id='Ext-form-Labelable-cfg-afterSubTpl'>        /**
</span>         * @cfg {String/Array/Ext.XTemplate} afterSubTpl
         * An optional string or `XTemplate` configuration to insert in the field markup
         * after the {@link #getSubTplMarkup subTpl markup}. If an `XTemplate` is used, the
         * component's {@link Ext.AbstractComponent#renderData render data} serves as the context.
         */
        'afterSubTpl',

<span id='Ext-form-Labelable-cfg-beforeLabelTextTpl'>        /**
</span>         * @cfg {String/Array/Ext.XTemplate} 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 {@link Ext.AbstractComponent#renderData render data}
         * serves as the context.
         */
        'beforeLabelTextTpl',

<span id='Ext-form-Labelable-cfg-afterLabelTextTpl'>        /**
</span>         * @cfg {String/Array/Ext.XTemplate} 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 {@link Ext.AbstractComponent#renderData render data}
         * serves as the context.
         */
        'afterLabelTextTpl',

<span id='Ext-form-Labelable-cfg-labelAttrTpl'>        /**
</span>         * @cfg {String/Array/Ext.XTemplate} 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
         * {@link Ext.AbstractComponent#renderData render data} serves as the context.
         */
        'labelAttrTpl'
    ],

    // This is an array to avoid a split on every call to Ext.copyTo
    labelableRenderProps: [ 'allowBlank', 'id', 'labelAlign', 'fieldBodyCls', 'baseBodyCls',
                            'clearCls', 'labelSeparator', 'msgTarget' ],

<span id='Ext-form-Labelable-method-initLabelable'>    /**
</span>     * Performs initialization of this mixin. Component classes using this mixin should call this method during their
     * own initialization.
     */
    initLabelable: function() {
        var me = this,
            padding = me.padding;

        // This Component is rendered as a table. Padding doesn't work on tables
        // Before padding can be applied to the encapsulating table element, copy the padding into
        // an extraMargins property which is to be added to all computed margins post render :(
        if (padding) {
            me.padding = undefined;
            me.extraMargins = Ext.Element.parseBox(padding);
        }

        me.addCls(me.formItemCls);
        
        // Prevent first render of active error, at Field render time from signalling a change from undefined to &quot;
        me.lastActiveError = '';

        me.addEvents(
<span id='Ext-form-Labelable-event-errorchange'>            /**
</span>             * @event errorchange
             * Fires when the active error message is changed via {@link #setActiveError}.
             * @param {Ext.form.Labelable} this
             * @param {String} error The active error message
             */
            'errorchange'
        );
    },

<span id='Ext-form-Labelable-method-trimLabelSeparator'>    /**
</span>     * Returns the trimmed label by slicing off the label separator character. Can be overridden.
     * @return {String} The trimmed field label, or empty string if not defined
     */
    trimLabelSeparator: function() {
        var me = this,
            separator = me.labelSeparator,
            label = me.fieldLabel || '',
            lastChar = label.substr(label.length - 1);

        // if the last char is the same as the label separator then slice it off otherwise just return label value
        return lastChar === separator ? label.slice(0, -1) : label;
    },

<span id='Ext-form-Labelable-method-getFieldLabel'>    /**
</span>     * Returns the label for the field. Defaults to simply returning the {@link #fieldLabel} config. Can be overridden
     * to provide a custom generated label.
     * @template
     * @return {String} The configured field label, or empty string if not defined
     */
    getFieldLabel: function() {
        return this.trimLabelSeparator();
    },
    
<span id='Ext-form-Labelable-method-setFieldLabel'>    /**
</span>     * Set the label of this field.
     * @param {String} label The new label. The {@link #labelSeparator} will be automatically appended to the label
     * string.
     */
    setFieldLabel: function(label){
        label = label || '';
        
        var me = this,
            separator = me.labelSeparator,
            labelEl = me.labelEl;
        
        me.fieldLabel = label;
        if (me.rendered) {
            if (Ext.isEmpty(label) &amp;&amp; me.hideEmptyLabel) {
                labelEl.parent().setDisplayed('none');
            } else {
                if (separator) {
                    label = me.trimLabelSeparator() + separator;
                }
                labelEl.update(label);
                labelEl.parent().setDisplayed('');
            }
            me.updateLayout();
        }
    },

    getInsertionRenderData: function (data, names) {
        var i = names.length,
            name, value;

        while (i--) {
            name = names[i];
            value = this[name];

            if (value) {
                if (typeof value != 'string') {
                    if (!value.isTemplate) {
                        value = Ext.XTemplate.getTpl(this, name);
                    }
                    value = value.apply(data);
                }
            }

            data[name] = value || '';
        }

        return data;
    },

<span id='Ext-form-Labelable-method-getLabelableRenderData'>    /**
</span>     * Generates the arguments for the field decorations {@link #labelableRenderTpl rendering template}.
     * @return {Object} The template arguments
     * @protected
     */
    getLabelableRenderData: function() {
        var me = this,
            data,
            tempEl,
            topLabel = me.labelAlign === 'top';

        if (!Ext.form.Labelable.errorIconWidth) {
            Ext.form.Labelable.errorIconWidth = (tempEl = Ext.resetElement.createChild({style: 'position:absolute', cls: Ext.baseCSSPrefix + 'form-invalid-icon'})).getWidth();
            tempEl.remove();
        }

        data = Ext.copyTo({
            inFormLayout   : me.ownerLayout &amp;&amp; me.ownerLayout.type === 'form',
            inputId        : me.getInputId(),
            labelOnLeft    : !topLabel,
            hideLabel      : !me.hasVisibleLabel(),
            fieldLabel     : me.getFieldLabel(),
            labelCellStyle : me.getLabelCellStyle(),
            labelCellAttrs : me.getLabelCellAttrs(),
            labelCls       : me.getLabelCls(),
            labelStyle     : me.getLabelStyle(),
            bodyColspan    : me.getBodyColspan(),
            externalError  : !me.autoFitErrors,
            errorMsgCls    : me.getErrorMsgCls(),
            errorIconWidth : Ext.form.Labelable.errorIconWidth
        },
        me, me.labelableRenderProps, true);

        me.getInsertionRenderData(data, me.labelableInsertions);

        return data;
    },
    
    beforeLabelableRender: function() {
        var me = this;
        if (me.ownerLayout) {
            me.addCls(Ext.baseCSSPrefix + me.ownerLayout.type + '-form-item');
        }
    },

    onLabelableRender: function() {
        var me = this,
            margins,
            side,
            style = {};

        if (me.extraMargins) {
            margins = me.el.getMargin();
            for (side in margins) {
                if (margins.hasOwnProperty(side)) {
                    style['margin-' + side] = (margins[side] + me.extraMargins[side]) + 'px';
                }
            }
            me.el.setStyle(style);
        }
    },
    
<span id='Ext-form-Labelable-method-hasVisibleLabel'>    /**
</span>     * Checks if the field has a visible label
     * @return {Boolean} True if the field has a visible label
     */
    hasVisibleLabel: function(){
        if (this.hideLabel) {
            return false;
        }
        return !(this.hideEmptyLabel &amp;&amp; !this.getFieldLabel());
    },
    
<span id='Ext-form-Labelable-method-getBodyColspan'>    /**
</span>     * @private
     * Calculates the colspan value for the body cell - the cell which contains the input field.
     *
     * The field table structure contains 4 columns:
     */
    getBodyColspan: function() {
        var me = this,
            result;

        if (me.msgTarget === 'side' &amp;&amp; (!me.autoFitErrors || me.hasActiveError())) {
            result = 1;
        } else {
            result = 2;
        }
        if (me.labelAlign !== 'top' &amp;&amp; !me.hasVisibleLabel()) {
            result++;
        }
        return result;
    },
    
    getLabelCls: function() {
        var labelCls = this.labelCls,
            labelClsExtra = this.labelClsExtra;

        if (this.labelAlign === 'top') {
            labelCls += '-top';
        }
        return labelClsExtra ? labelCls + ' ' + labelClsExtra : labelCls;
    },

    getLabelCellStyle: function() {
        var me = this,
            hideLabelCell = me.hideLabel || (!me.fieldLabel &amp;&amp; me.hideEmptyLabel);

        return hideLabelCell ? 'display:none;' : '';
    },
    
    getErrorMsgCls: function() {
        var me = this,
            hideLabelCell = (me.hideLabel || (!me.fieldLabel &amp;&amp; me.hideEmptyLabel));
        
        return me.errorMsgCls + (!hideLabelCell &amp;&amp; me.labelAlign === 'top' ? ' ' + Ext.baseCSSPrefix + 'lbl-top-err-icon' : '');
    },

    getLabelCellAttrs: function() {
        var me = this,
            labelAlign = me.labelAlign,
            result = '';

        if (labelAlign !== 'top') {
            result = 'valign=&quot;top&quot; halign=&quot;' + labelAlign + '&quot; width=&quot;' + (me.labelWidth + me.labelPad) + '&quot;';
        }
        return result + ' class=&quot;' + Ext.baseCSSPrefix + 'field-label-cell&quot;';
    },
    
<span id='Ext-form-Labelable-method-getLabelStyle'>    /**
</span>     * Gets any label styling for the labelEl
     * @private
     * @return {String} The label styling
     */
    getLabelStyle: function(){
        var me = this,
            labelPad = me.labelPad,
            labelStyle = '';

        // Calculate label styles up front rather than in the Field layout for speed; this
        // is safe because label alignment/width/pad are not expected to change.
        if (me.labelAlign !== 'top') {
            if (me.labelWidth) {
                labelStyle = 'width:' + me.labelWidth + 'px;';
            }
            labelStyle += 'margin-right:' + labelPad + 'px;';
        }
        
        return labelStyle + (me.labelStyle || '');
    },

<span id='Ext-form-Labelable-method-getSubTplMarkup'>    /**
</span>     * 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.
     * @return {String} The markup to be inserted
     * @protected
     */
    getSubTplMarkup: function() {
        return '';
    },

<span id='Ext-form-Labelable-method-getInputId'>    /**
</span>     * Get the input id, if any, for this component. This is used as the &quot;for&quot; attribute on the label element.
     * Implementing subclasses may also use this as e.g. the id for their own input element.
     * @return {String} The input id
     */
    getInputId: function() {
        return '';
    },

<span id='Ext-form-Labelable-method-getActiveError'>    /**
</span>     * 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.
     * @return {String} The active error message on the component; if there is no error, an empty string is returned.
     */
    getActiveError : function() {
        return this.activeError || '';
    },

<span id='Ext-form-Labelable-method-hasActiveError'>    /**
</span>     * 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.
     * @return {Boolean}
     */
    hasActiveError: function() {
        return !!this.getActiveError();
    },

<span id='Ext-form-Labelable-method-setActiveError'>    /**
</span>     * Sets the active error message to the given string. This replaces the entire error message contents with the given
     * string. Also see {@link #setActiveErrors} which accepts an Array of messages and formats them according to the
     * {@link #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 {@link
     * Ext.form.field.Base} you should call {@link Ext.form.field.Base#markInvalid markInvalid} instead.
     * @param {String} msg The error message
     */
    setActiveError: function(msg) {
        this.setActiveErrors(msg);
    },

<span id='Ext-form-Labelable-method-getActiveErrors'>    /**
</span>     * 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.
     * @return {String[]} The active error messages on the component; if there are no errors, an empty Array is
     * returned.
     */
    getActiveErrors: function() {
        return this.activeErrors || [];
    },

<span id='Ext-form-Labelable-method-setActiveErrors'>    /**
</span>     * Set the active error message to an Array of error messages. The messages are formatted into a single message
     * string using the {@link #activeErrorsTpl}. Also see {@link #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
     * {@link Ext.form.field.Base} you should call {@link Ext.form.field.Base#markInvalid markInvalid} instead.
     * @param {String[]} errors The error messages
     */
    setActiveErrors: function(errors) {
        errors = Ext.Array.from(errors);
        this.activeError = errors[0];
        this.activeErrors = errors;
        this.activeError = this.getTpl('activeErrorsTpl').apply({errors: errors});
        this.renderActiveError();
    },

<span id='Ext-form-Labelable-method-unsetActiveError'>    /**
</span>     * 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 {@link
     * Ext.form.field.Base} you should call {@link Ext.form.field.Base#clearInvalid clearInvalid} instead.
     */
    unsetActiveError: function() {
        delete this.activeError;
        delete this.activeErrors;
        this.renderActiveError();
    },

<span id='Ext-form-Labelable-method-renderActiveError'>    /**
</span>     * @private
     * 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.
     */
    renderActiveError: function() {
        var me = this,
            activeError = me.getActiveError(),
            hasError = !!activeError;

        if (activeError !== me.lastActiveError) {
            me.fireEvent('errorchange', me, activeError);
            me.lastActiveError = activeError;
        }

        if (me.rendered &amp;&amp; !me.isDestroyed &amp;&amp; !me.preventMark) {
            // Add/remove invalid class
            me.el[hasError ? 'addCls' : 'removeCls'](me.invalidCls);

            // Update the aria-invalid attribute
            me.getActionEl().dom.setAttribute('aria-invalid', hasError);

            // Update the errorEl (There will only be one if msgTarget is 'side' or 'under') with the error message text
            if (me.errorEl) {
                me.errorEl.dom.innerHTML = activeError;
            }
        }
    },

<span id='Ext-form-Labelable-method-setFieldDefaults'>    /**
</span>     * 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.
     * @param {Object} defaults The defaults to apply to the object.
     */
    setFieldDefaults: function(defaults) {
        var me = this,
            val, key;

        for (key in defaults) {
            if (defaults.hasOwnProperty(key)) {
                val = defaults[key];

                if (!me.hasOwnProperty(key)) {
                    me[key] = val;
                }
            }
        }
    }
});
</pre>
</body>
</html>