[extjs.git] / extjs / classic / classic / src / form / Labelable.js

/**\r
 * A mixin which allows a component to be configured and decorated with a label and/or error message as is\r
 * common for form fields. This is used by e.g. Ext.form.field.Base and Ext.form.FieldContainer\r
 * to let them be managed by the Field layout.\r
 *\r
 * NOTE: This mixin is mainly for internal library use and most users should not need to use it directly. It\r
 * is more likely you will want to use one of the component classes that import this mixin, such as\r
 * Ext.form.field.Base or Ext.form.FieldContainer.\r
 *\r
 * Use of this mixin does not make a component a field in the logical sense, meaning it does not provide any\r
 * logic or state related to values or validation; that is handled by the related Ext.form.field.Field\r
 * mixin. These two mixins may be used separately (for example Ext.form.FieldContainer is Labelable but not a\r
 * Field), or in combination (for example Ext.form.field.Base implements both and has logic for connecting the\r
 * two.)\r
 *\r
 * Component classes which use this mixin should use the Field layout\r
 * or a derivation thereof to properly size and position the label and message according to the component config.\r
 * They must also call the {@link #initLabelable} method during component initialization to ensure the mixin gets\r
 * set up correctly.\r
 */\r
Ext.define("Ext.form.Labelable", {\r
    extend: 'Ext.Mixin',\r
\r
    requires: [\r
        'Ext.XTemplate',\r
        'Ext.overrides.dom.Element'\r
    ],\r
\r
    isLabelable: true,\r
\r
    mixinConfig: {\r
        id: 'labelable',\r
\r
        on: {\r
            beforeRender: 'beforeLabelRender',\r
            onRender: 'onLabelRender'\r
        }\r
    },\r
\r
    config: {\r
        childEls: [\r
            /**\r
             * @property {Ext.dom.Element} labelEl\r
             * The label Element for this component. Only available after the component has been rendered.\r
             */\r
            'labelEl',\r
\r
            /**\r
             * @property {Ext.dom.Element} bodyEl\r
             * The div Element wrapping the component's contents. Only available after the component has been rendered.\r
             */\r
            'bodyEl',\r
\r
            /**\r
             * @property {Ext.dom.Element} errorEl\r
             * The div Element that will contain the component's error message(s). Note that depending on the configured\r
             * {@link #msgTarget}, this element may be hidden in favor of some other form of presentation, but will always\r
             * be present in the DOM for use by assistive technologies.\r
             */\r
            'errorEl',\r
\r
            'errorWrapEl',\r
            'ariaErrorEl'\r
        ]\r
    },\r
\r
    /**\r
     * @cfg {String/String[]/Ext.XTemplate} labelableRenderTpl\r
     * The rendering template for the field decorations. Component classes using this mixin\r
     * should include logic to use this as their {@link Ext.Component#renderTpl renderTpl},\r
     * and implement the {@link #getSubTplMarkup} method to generate the field body content.\r
     * @private\r
     */\r
    labelableRenderTpl: [\r
        '{beforeLabelTpl}',\r
        '<label id="{id}-labelEl" data-ref="labelEl" class="{labelCls} {labelCls}-{ui} {labelClsExtra} ',\r
                '{childElCls} {unselectableCls}" style="{labelStyle}"<tpl if="inputId">',\r
                ' for="{inputId}"</tpl> {labelAttrTpl}>',\r
            '<span class="{labelInnerCls} {labelInnerCls}-{ui}" style="{labelInnerStyle}">',\r
            '{beforeLabelTextTpl}',\r
            '<tpl if="fieldLabel">{fieldLabel}',\r
                '<tpl if="labelSeparator">{labelSeparator}</tpl>',\r
            '</tpl>',\r
            '{afterLabelTextTpl}',\r
            '</span>',\r
        '</label>',\r
        '{afterLabelTpl}',\r
        '<div id="{id}-bodyEl" data-ref="bodyEl" role="presentation"',\r
            ' class="{baseBodyCls} {baseBodyCls}-{ui}<tpl if="fieldBodyCls">',\r
            ' {fieldBodyCls} {fieldBodyCls}-{ui}</tpl> {growCls} {extraFieldBodyCls}"',\r
            '<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>>',\r
            '{beforeBodyEl}',\r
            '{beforeSubTpl}',\r
            '{[values.$comp.getSubTplMarkup(values)]}',\r
            '{afterSubTpl}',\r
            '{afterBodyEl}',\r
            // Unlike errorEl below ariaErrorEl is always rendered but is clipped out of existence\r
            '<div id="{id}-ariaErrorEl" data-ref="ariaErrorEl" role="alert" aria-live="polite"',\r
                ' class="' + Ext.baseCSSPrefix + 'hidden-clip">',\r
            '</div>',\r
        '</div>',\r
        '<tpl if="renderError">',\r
            '<div id="{id}-errorWrapEl" data-ref="errorWrapEl" class="{errorWrapCls} {errorWrapCls}-{ui}',\r
                ' {errorWrapExtraCls}" style="{errorWrapStyle}">',\r
                '<div role="presentation" id="{id}-errorEl" data-ref="errorEl" ',\r
                    'class="{errorMsgCls} {invalidMsgCls} {invalidMsgCls}-{ui}" ',\r
                    'data-anchorTarget="{tipAnchorTarget}">',\r
                '</div>',\r
            '</div>',\r
        '</tpl>',\r
        {\r
            disableFormats: true\r
        }\r
    ],\r
\r
    /**\r
     * @cfg {String/String[]/Ext.XTemplate} activeErrorsTpl\r
     * The template used to format the Array of error messages passed to {@link #setActiveErrors} into a single HTML\r
     * string. if the {@link #msgTarget} is title, it defaults to a list separated by new lines. Otherwise, it\r
     * renders each message as an item in an unordered list.\r
     */\r
    activeErrorsTpl: undefined,\r
\r
    htmlActiveErrorsTpl: [\r
        '<tpl if="errors && errors.length">',\r
            '<ul class="{listCls}">',\r
                '<tpl for="errors"><li>{.}</li></tpl>',\r
            '</ul>',\r
        '</tpl>'\r
    ],\r
\r
    plaintextActiveErrorsTpl: [\r
        '<tpl if="errors && errors.length">',\r
            '<tpl for="errors"><tpl if="xindex &gt; 1">\n</tpl>{.}</tpl>',\r
        '</tpl>'\r
    ],\r
\r
    /**\r
     * @property {Boolean} isFieldLabelable\r
     * Flag denoting that this object is labelable as a field. Always true.\r
     */\r
    isFieldLabelable: true,\r
\r
    /**\r
     * @cfg {String} formItemCls\r
     * A CSS class to be applied to the outermost element to denote that it is participating in the form field layout.\r
     */\r
    formItemCls: Ext.baseCSSPrefix + 'form-item',\r
\r
    /**\r
     * @cfg {String} labelCls\r
     * The CSS class to be applied to the label element. This (single) CSS class is used to formulate the renderSelector\r
     * and drives the field layout where it is concatenated with a hyphen ('-') and {@link #labelAlign}. To add\r
     * additional classes, use {@link #labelClsExtra}.\r
     */\r
    labelCls: Ext.baseCSSPrefix + 'form-item-label',\r
\r
    /**\r
     * @private\r
     */\r
    topLabelCls: Ext.baseCSSPrefix + 'form-item-label-top',\r
    rightLabelCls: Ext.baseCSSPrefix + 'form-item-label-right',\r
    labelInnerCls: Ext.baseCSSPrefix + 'form-item-label-inner',\r
    topLabelSideErrorCls: Ext.baseCSSPrefix + 'form-item-label-top-side-error',\r
\r
    /**\r
     * @cfg {String} labelClsExtra\r
     * An optional string of one or more additional CSS classes to add to the label element. Defaults to empty.\r
     */\r
\r
    /**\r
     * @cfg {String} errorMsgCls\r
     * The CSS class to be applied to the error message element.\r
     */\r
    errorMsgCls: Ext.baseCSSPrefix + 'form-error-msg',\r
\r
    errorWrapCls: Ext.baseCSSPrefix + 'form-error-wrap',\r
    errorWrapSideCls: Ext.baseCSSPrefix + 'form-error-wrap-side',\r
    errorWrapUnderCls: Ext.baseCSSPrefix + 'form-error-wrap-under',\r
    errorWrapUnderSideLabelCls: Ext.baseCSSPrefix + 'form-error-wrap-under-side-label',\r
\r
    /**\r
     * @cfg {String} baseBodyCls\r
     * The CSS class to be applied to the body content element.\r
     */\r
    baseBodyCls: Ext.baseCSSPrefix + 'form-item-body',\r
\r
    invalidIconCls: Ext.baseCSSPrefix + 'form-invalid-icon',\r
\r
    invalidUnderCls: Ext.baseCSSPrefix + 'form-invalid-under',\r
\r
    noLabelCls: Ext.baseCSSPrefix + 'form-item-no-label',\r
\r
    /**\r
     * @cfg {String} fieldBodyCls\r
     * An extra CSS class to be applied to the body content element in addition to {@link #baseBodyCls}.\r
     */\r
    fieldBodyCls: '',\r
\r
    /**\r
     * @cfg {String} invalidCls\r
     * The CSS class to use when marking the component invalid.\r
     */\r
    invalidCls : Ext.baseCSSPrefix + 'form-invalid',\r
\r
    /**\r
     * @cfg {String} fieldLabel\r
     * The label for the field. It gets appended with the {@link #labelSeparator}, and its position and sizing is\r
     * determined by the {@link #labelAlign} and {@link #labelWidth} configs.\r
     */\r
    fieldLabel: undefined,\r
\r
    /**\r
     * @cfg {String} labelAlign\r
     * Controls the position and alignment of the {@link #fieldLabel}. Valid values are:\r
     *\r
     *   - "left" (the default) - The label is positioned to the left of the field, with its text aligned to the left.\r
     *     Its width is determined by the {@link #labelWidth} config.\r
     *   - "top" - The label is positioned above the field.\r
     *   - "right" - The label is positioned to the left of the field, with its text aligned to the right.\r
     *     Its width is determined by the {@link #labelWidth} config.\r
     */\r
    labelAlign : 'left',\r
\r
    /**\r
     * @cfg {Number} labelWidth\r
     * The width of the {@link #fieldLabel} in pixels. Only applicable if {@link #labelAlign}\r
     * is set to "left" or "right".\r
     */\r
    labelWidth: 100,\r
\r
    /**\r
     * @cfg {Number} labelPad\r
     * The amount of space in pixels between the {@link #fieldLabel} and the field body.\r
     * This defaults to `5` for compatibility with Ext JS 4, however, as of Ext JS 5\r
     * the space between the label and the body can optionally be determined by the theme\r
     * using the {@link #$form-label-horizontal-spacing} (for side-aligned labels) and\r
     * {@link #$form-label-vertical-spacing} (for top-aligned labels) SASS variables.\r
     * In order for the stylesheet values as to take effect, you must use a labelPad value\r
     * of `null`.\r
     */\r
    labelPad: 5,\r
\r
    //<locale>\r
    /**\r
     * @cfg {String} labelSeparator\r
     * Character(s) to be inserted at the end of the {@link #fieldLabel label text}.\r
     *\r
     * Set to empty string to hide the separator completely.\r
     */\r
    labelSeparator : ':',\r
    //</locale>\r
\r
    /**\r
     * @cfg {String} labelStyle\r
     * A CSS style specification string to apply directly to this field's label.\r
     */\r
    \r
    /**\r
     * @cfg {Boolean} hideLabel\r
     * Set to true to completely hide the label element ({@link #fieldLabel} and {@link #labelSeparator}). Also see\r
     * {@link #hideEmptyLabel}, which controls whether space will be reserved for an empty fieldLabel.\r
     */\r
    hideLabel: false,\r
\r
    /**\r
     * @cfg {Boolean} hideEmptyLabel\r
     * When set to true, the label element ({@link #fieldLabel} and {@link #labelSeparator}) will be automatically\r
     * hidden if the {@link #fieldLabel} is empty. Setting this to false will cause the empty label element to be\r
     * rendered and space to be reserved for it; this is useful if you want a field without a label to line up with\r
     * other labeled fields in the same form.\r
     *\r
     * If you wish to unconditionall hide the label even if a non-empty fieldLabel is configured, then set the\r
     * {@link #hideLabel} config to true.\r
     */\r
    hideEmptyLabel: true,\r
\r
    /**\r
     * @cfg {Boolean} preventMark\r
     * true to disable displaying any {@link #setActiveError error message} set on this object.\r
     */\r
    preventMark: false,\r
\r
    /**\r
     * @cfg {Boolean} autoFitErrors\r
     * Whether to adjust the component's body width to make room for 'side'\r
     * {@link #msgTarget error messages}.\r
     */\r
    autoFitErrors: true,\r
\r
    /**\r
     * @cfg {String} msgTarget\r
     * The location where the error message text should display. Must be one of the following values:\r
     *\r
     *   - `qtip` Display a quick tip containing the message when the user hovers over the field.\r
     *     This is the default.\r
     *\r
     *     **{@link Ext.tip.QuickTipManager#init} must have been called for this setting to work.**\r
     *\r
     *   - `title` Display the message in a default browser title attribute popup.\r
     *   - `under` Add a block div beneath the field containing the error message.\r
     *   - `side` Add an error icon to the right of the field, displaying the message in a popup on hover.\r
     *   - `none` Don't display any error message. This might be useful if you are implementing custom error display.\r
     *   - `[element id]` Add the error message directly to the innerHTML of the specified element.\r
     */\r
    msgTarget: 'qtip',\r
\r
    /**\r
     * @private\r
     * Map for msg target lookup, if target is not in this map it is assumed\r
     * to be an element id\r
     */\r
    msgTargets: {\r
        qtip: 1,\r
        title: 1,\r
        under: 1,\r
        side: 1,\r
        none: 1\r
    },\r
\r
    /**\r
     * @cfg {String} activeError\r
     * If specified, then the component will be displayed with this value as its active error when first rendered. Use\r
     * {@link #setActiveError} or {@link #unsetActiveError} to change it after component creation.\r
     */\r
\r
    /**\r
     * @private\r
     * Tells the layout system that the height can be measured immediately because the width does not need setting.\r
     */\r
    noWrap: true,\r
\r
    labelableInsertions: [\r
\r
        /**\r
         * @cfg {String/Array/Ext.XTemplate} beforeBodyEl\r
         * An optional string or `XTemplate` configuration to insert in the field markup\r
         * at the beginning of the input containing element. If an `XTemplate` is used, the component's {@link Ext.Component#renderData render data}\r
         * serves as the context.\r
         */\r
        'beforeBodyEl',\r
\r
        /**\r
         * @cfg {String/Array/Ext.XTemplate} afterBodyEl\r
         * An optional string or `XTemplate` configuration to insert in the field markup\r
         * at the end of the input containing element. If an `XTemplate` is used, the component's {@link Ext.Component#renderData render data}\r
         * serves as the context.\r
         */\r
        'afterBodyEl',\r
\r
        /**\r
         * @cfg {String/Array/Ext.XTemplate} beforeLabelTpl\r
         * An optional string or `XTemplate` configuration to insert in the field markup\r
         * before the label element. If an `XTemplate` is used, the component's {@link Ext.Component#renderData render data}\r
         * serves as the context.\r
         */\r
        'beforeLabelTpl',\r
\r
        /**\r
         * @cfg {String/Array/Ext.XTemplate} afterLabelTpl\r
         * An optional string or `XTemplate` configuration to insert in the field markup\r
         * after the label element. If an `XTemplate` is used, the component's {@link Ext.Component#renderData render data}\r
         * serves as the context.\r
         */\r
        'afterLabelTpl',\r
\r
        /**\r
         * @cfg {String/Array/Ext.XTemplate} beforeSubTpl\r
         * An optional string or `XTemplate` configuration to insert in the field markup\r
         * before the {@link #getSubTplMarkup subTpl markup}. If an `XTemplate` is used, the\r
         * component's {@link Ext.Component#renderData render data} serves as the context.\r
         */\r
        'beforeSubTpl',\r
\r
        /**\r
         * @cfg {String/Array/Ext.XTemplate} afterSubTpl\r
         * An optional string or `XTemplate` configuration to insert in the field markup\r
         * after the {@link #getSubTplMarkup subTpl markup}. If an `XTemplate` is used, the\r
         * component's {@link Ext.Component#renderData render data} serves as the context.\r
         */\r
        'afterSubTpl',\r
\r
        /**\r
         * @cfg {String/Array/Ext.XTemplate} beforeLabelTextTpl\r
         * An optional string or `XTemplate` configuration to insert in the field markup\r
         * before the label text. If an `XTemplate` is used, the component's {@link Ext.Component#renderData render data}\r
         * serves as the context.\r
         */\r
        'beforeLabelTextTpl',\r
\r
        /**\r
         * @cfg {String/Array/Ext.XTemplate} afterLabelTextTpl\r
         * An optional string or `XTemplate` configuration to insert in the field markup\r
         * after the label text. If an `XTemplate` is used, the component's {@link Ext.Component#renderData render data}\r
         * serves as the context.\r
         */\r
        'afterLabelTextTpl',\r
\r
        /**\r
         * @cfg {String/Array/Ext.XTemplate} labelAttrTpl\r
         * An optional string or `XTemplate` configuration to insert in the field markup\r
         * inside the label element (as attributes). If an `XTemplate` is used, the component's\r
         * {@link Ext.Component#renderData render data} serves as the context.\r
         */\r
        'labelAttrTpl'\r
    ],\r
\r
    statics: {\r
        /**\r
         * Use a custom QuickTip instance separate from the main QuickTips singleton, so that we\r
         * can give it a custom frame style. Responds to errorqtip rather than the qtip property.\r
         * @static\r
         * @private\r
         */\r
        initTip: function() {\r
            var tip = this.tip,\r
                cfg, copy;\r
\r
            if (tip) {\r
                return;\r
            }\r
\r
            cfg = {\r
                id: 'ext-form-error-tip',\r
                //<debug>\r
                // tell the spec runner to ignore this element when checking if the dom is clean\r
                sticky: true,\r
                //</debug>\r
                ui: 'form-invalid'\r
            };\r
\r
            // On Touch devices, tapping the target shows the qtip\r
            if (Ext.supports.Touch) {\r
                cfg.dismissDelay = 0;\r
                cfg.anchor = 'top';\r
                cfg.showDelay = 0;\r
                cfg.listeners = {\r
                    beforeshow: function() {\r
                        this.minWidth = Ext.fly(this.anchorTarget).getWidth();\r
                    }\r
                };\r
            }\r
            tip = this.tip = Ext.create('Ext.tip.QuickTip', cfg);\r
            copy = Ext.apply({}, tip.tagConfig);\r
            copy.attribute = 'errorqtip';\r
            tip.setTagConfig(copy);\r
        },\r
\r
        /**\r
         * Destroy the error tip instance.\r
         * @static\r
         */\r
        destroyTip: function() {\r
            this.tip = Ext.destroy(this.tip);\r
        }\r
    },\r
\r
    /**\r
     * @event errorchange\r
     * Fires when the active error message is changed via {@link #setActiveError}.\r
     * @param {Ext.form.Labelable} this\r
     * @param {String} error The active error message\r
     */\r
\r
    /**\r
     * Performs initialization of this mixin. Component classes using this mixin should call this method during their\r
     * own initialization.\r
     */\r
    initLabelable: function() {\r
        var me = this,\r
            padding = me.padding;\r
\r
        // This Component is rendered as a table. Padding doesn't work on tables\r
        // Before padding can be applied to the encapsulating table element, copy the padding into\r
        // an extraMargins property which is to be added to all computed margins post render :(\r
        if (padding) {\r
            me.padding = undefined;\r
            me.extraMargins = Ext.Element.parseBox(padding);\r
        }\r
\r
        // IE8 hack for https://sencha.jira.com/browse/EXTJS-17536.\r
        // Need to force a relayout of the display:table form item.\r
        // TODO: Remove when IE8 retires.\r
        if (Ext.isIE8) {\r
            me.restoreDisplay = Ext.Function.createDelayed(me.doRestoreDisplay, 0, me);\r
        }\r
\r
        if (!me.activeErrorsTpl) {\r
            if (me.msgTarget === 'title') {\r
                me.activeErrorsTpl = me.plaintextActiveErrorsTpl;\r
            } else {\r
                me.activeErrorsTpl = me.htmlActiveErrorsTpl;\r
            }\r
        }\r
\r
        me.addCls([me.formItemCls, me.formItemCls + '-' + me.ui]);\r
\r
        // Prevent first render of active error, at Field render time from signalling a change from undefined to "\r
        me.lastActiveError = '';\r
\r
        // bubbleEvents on the prototype of a mixin won't work, so call enableBubble\r
        me.enableBubble('errorchange');\r
    },\r
\r
    /**\r
     * Returns the trimmed label by slicing off the label separator character. Can be overridden.\r
     * @return {String} The trimmed field label, or empty string if not defined\r
     */\r
    trimLabelSeparator: function() {\r
        var me = this,\r
            separator = me.labelSeparator,\r
            label = me.fieldLabel || '',\r
            lastChar = label.substr(label.length - 1);\r
\r
        // if the last char is the same as the label separator then slice it off otherwise just return label value\r
        return lastChar === separator ? label.slice(0, -1) : label;\r
    },\r
\r
    /**\r
     * Returns the label for the field. Defaults to simply returning the {@link #fieldLabel} config. Can be overridden\r
     * to provide a custom generated label.\r
     * @template\r
     * @return {String} The configured field label, or empty string if not defined\r
     */\r
    getFieldLabel: function() {\r
        return this.trimLabelSeparator();\r
    },\r
\r
    /**\r
     * Set the label of this field.\r
     * @param {String} label The new label. The {@link #labelSeparator} will be automatically appended to the label\r
     * string.\r
     */\r
    setFieldLabel: function(label){\r
        label = label || '';\r
\r
        var me = this,\r
            separator = me.labelSeparator,\r
            labelEl = me.labelEl,\r
            errorWrapEl = me.errorWrapEl,\r
            sideLabel = (me.labelAlign !== 'top'),\r
            noLabelCls = me.noLabelCls,\r
            errorWrapUnderSideLabelCls = me.errorWrapUnderSideLabelCls;\r
\r
        me.fieldLabel = label;\r
        if (me.rendered) {\r
            if (Ext.isEmpty(label) && me.hideEmptyLabel) {\r
                me.addCls(noLabelCls);\r
                if (sideLabel && errorWrapEl) {\r
                    errorWrapEl.removeCls(errorWrapUnderSideLabelCls);\r
                }\r
            } else {\r
                if (separator) {\r
                    label = me.trimLabelSeparator() + separator;\r
                }\r
                labelEl.dom.firstChild.innerHTML = label;\r
                me.removeCls(noLabelCls);\r
                if (sideLabel && errorWrapEl) {\r
                    errorWrapEl.addCls(errorWrapUnderSideLabelCls);\r
                }\r
            }\r
            me.updateLayout();\r
        }\r
    },\r
\r
    setHideLabel: function(hideLabel) {\r
        var me = this;\r
\r
        if (hideLabel !== me.hideLabel) {\r
            me.hideLabel = hideLabel;\r
            if (me.rendered) {\r
                me[hideLabel ? 'addCls' : 'removeCls'](me.noLabelCls);\r
                me.updateLayout();\r
            }\r
        }\r
    },\r
\r
    setHideEmptyLabel: function(hideEmptyLabel) {\r
        var me = this,\r
            hide;\r
\r
        if (hideEmptyLabel !== me.hideEmptyLabel) {\r
            me.hideEmptyLabel = hideEmptyLabel;\r
            if (me.rendered && !me.hideLabel) {\r
                hide = hideEmptyLabel && !me.getFieldLabel();\r
                me[hide ? 'addCls' : 'removeCls'](me.noLabelCls);\r
                me.updateLayout();\r
            }\r
        }\r
    },\r
\r
    getInsertionRenderData: function (data, names) {\r
        var i = names.length,\r
            name, value;\r
\r
        while (i--) {\r
            name = names[i];\r
            value = this[name];\r
\r
            if (value) {\r
                if (typeof value !== 'string') {\r
                    if (!value.isTemplate) {\r
                        value = Ext.XTemplate.getTpl(this, name);\r
                    }\r
                    value = value.apply(data);\r
                }\r
            }\r
\r
            data[name] = value || '';\r
        }\r
\r
        return data;\r
    },\r
\r
    /**\r
     * Generates the arguments for the field decorations {@link #labelableRenderTpl\r
     * rendering template}.\r
     * @param {Object} data optional object to use as the base data object.  If provided,\r
     * this method will add properties to the base object instead of creating a new one.\r
     * @return {Object} The template arguments\r
     * @protected\r
     */\r
    getLabelableRenderData: function() {\r
        var me = this,\r
            labelAlign = me.labelAlign,\r
            topLabel = (labelAlign === 'top'),\r
            rightLabel = (labelAlign === 'right'),\r
            sideError = (me.msgTarget === 'side'),\r
            underError = (me.msgTarget === 'under'),\r
            errorMsgCls = me.errorMsgCls,\r
            labelPad = me.labelPad,\r
            labelWidth = me.labelWidth,\r
            labelClsExtra = me.labelClsExtra || '',\r
            errorWrapExtraCls = sideError ? me.errorWrapSideCls : me.errorWrapUnderCls,\r
            labelStyle = '',\r
            labelInnerStyle = '',\r
            labelVisible = me.hasVisibleLabel(),\r
            autoFitErrors = me.autoFitErrors,\r
            defaultBodyWidth = me.defaultBodyWidth,\r
            bodyStyle, data;\r
\r
        if (topLabel) {\r
            labelClsExtra += ' ' + me.topLabelCls;\r
            if (labelPad) {\r
                labelInnerStyle = 'padding-bottom:' + labelPad + 'px;';\r
            }\r
            if (sideError && !autoFitErrors) {\r
                labelClsExtra += ' ' + me.topLabelSideErrorCls;\r
            }\r
        } else {\r
            if (rightLabel) {\r
                labelClsExtra += ' ' + me.rightLabelCls;\r
            }\r
            if (labelPad) {\r
                labelStyle += me.getHorizontalPaddingStyle() + labelPad + 'px;';\r
            }\r
            labelStyle += 'width:' + (labelWidth + (labelPad ? labelPad : 0)) + 'px;';\r
            // inner label needs width as well so that setting width on the outside\r
            // that is smaller than the natural width, will be ensured to take width\r
            // away from the body, and not the label.\r
            labelInnerStyle = 'width:' + labelWidth + 'px';\r
        }\r
\r
        if (labelVisible) {\r
            if (!topLabel && underError) {\r
                errorWrapExtraCls += ' ' + me.errorWrapUnderSideLabelCls;\r
            }\r
        }\r
\r
        if (defaultBodyWidth) {\r
            // This is here to support textfield's deprecated "size" config\r
            bodyStyle = 'min-width:' + defaultBodyWidth + 'px;max-width:' +\r
                defaultBodyWidth + 'px;';\r
        }\r
\r
        data = {\r
            id: me.id,\r
            inputId: me.getInputId(),\r
            labelCls: me.labelCls,\r
            labelClsExtra: labelClsExtra,\r
            labelStyle: labelStyle + (me.labelStyle || ''),\r
            labelInnerStyle: labelInnerStyle,\r
            labelInnerCls: me.labelInnerCls,\r
            unselectableCls: Ext.Element.unselectableCls,\r
            bodyStyle: bodyStyle,\r
            baseBodyCls: me.baseBodyCls,\r
            fieldBodyCls: me.fieldBodyCls,\r
            extraFieldBodyCls: me.extraFieldBodyCls,\r
            errorWrapCls: me.errorWrapCls,\r
            errorWrapExtraCls: errorWrapExtraCls,\r
            renderError: sideError || underError,\r
            invalidMsgCls: sideError ? me.invalidIconCls : underError ? me.invalidUnderCls : '',\r
            errorMsgCls: errorMsgCls,\r
            growCls: me.grow ? me.growCls : '',\r
            tipAnchorTarget: me.id + '-inputEl',\r
            errorWrapStyle: (sideError && !autoFitErrors) ?\r
                    'visibility:hidden' : 'display:none',\r
            fieldLabel: me.getFieldLabel(),\r
            labelSeparator: me.labelSeparator\r
        };\r
\r
        me.getInsertionRenderData(data, me.labelableInsertions);\r
\r
        return data;\r
    },\r
\r
    // hook for rtl\r
    getHorizontalPaddingStyle: function() {\r
        return 'padding-right:';\r
    },\r
\r
    beforeLabelRender: function() {\r
        var me = this;\r
        me.setFieldDefaults(me.getInherited().fieldDefaults);\r
        if (me.ownerLayout) {\r
            me.addCls(Ext.baseCSSPrefix + me.ownerLayout.type + '-form-item');\r
        }\r
        if (!me.hasVisibleLabel()) {\r
            me.addCls(me.noLabelCls);\r
        }\r
    },\r
\r
    onLabelRender: function() {\r
        var me = this,\r
            style = {},\r
            ExtElement = Ext.Element,\r
            errorWrapEl = me.errorWrapEl,\r
            margins, side;\r
\r
        if (errorWrapEl) {\r
            errorWrapEl.setVisibilityMode((me.msgTarget === 'side' && !me.autoFitErrors) ?\r
                ExtElement.VISIBILITY : ExtElement.DISPLAY);\r
        }\r
\r
        if (me.extraMargins) {\r
            margins = me.el.getMargin();\r
            for (side in margins) {\r
                if (margins.hasOwnProperty(side)) {\r
                    style['margin-' + side] = (margins[side] + me.extraMargins[side]) + 'px';\r
                }\r
            }\r
            me.el.setStyle(style);\r
        }\r
    },\r
\r
    /**\r
     * Checks if the field has a visible label\r
     * @return {Boolean} True if the field has a visible label\r
     */\r
    hasVisibleLabel: function(){\r
        if (this.hideLabel) {\r
            return false;\r
        }\r
        return !(this.hideEmptyLabel && !this.getFieldLabel());\r
    },\r
\r
    /**\r
     * Gets the markup to be inserted into the outer template's bodyEl. Defaults to empty string, should be implemented\r
     * by classes including this mixin as needed.\r
     * @return {String} The markup to be inserted\r
     * @protected\r
     */\r
    getSubTplMarkup: function() {\r
        return '';\r
    },\r
\r
    /**\r
     * Get the input id, if any, for this component. This is used as the "for" attribute on the label element.\r
     * Implementing subclasses may also use this as e.g. the id for their own input element.\r
     * @return {String} The input id\r
     */\r
    getInputId: function() {\r
        return '';\r
    },\r
\r
    /**\r
     * Gets the active error message for this component, if any. This does not trigger validation on its own, it merely\r
     * returns any message that the component may already hold.\r
     * @return {String} The active error message on the component; if there is no error, an empty string is returned.\r
     */\r
    getActiveError : function() {\r
        return this.activeError || '';\r
    },\r
\r
    /**\r
     * Tells whether the field currently has an active error message. This does not trigger validation on its own, it\r
     * merely looks for any message that the component may already hold.\r
     * @return {Boolean}\r
     */\r
    hasActiveError: function() {\r
        return !!this.getActiveError();\r
    },\r
\r
    /**\r
     * Sets the active error message to the given string. This replaces the entire error message contents with the given\r
     * string. Also see {@link #setActiveErrors} which accepts an Array of messages and formats them according to the\r
     * {@link #activeErrorsTpl}. Note that this only updates the error message element's text and attributes, you'll\r
     * have to call doComponentLayout to actually update the field's layout to match. If the field extends {@link\r
     * Ext.form.field.Base} you should call {@link Ext.form.field.Base#markInvalid markInvalid} instead.\r
     * @param {String} msg The error message\r
     */\r
    setActiveError: function(msg) {\r
        this.setActiveErrors(msg);\r
    },\r
\r
    /**\r
     * Gets an Array of any active error messages currently applied to the field. This does not trigger validation on\r
     * its own, it merely returns any messages that the component may already hold.\r
     * @return {String[]} The active error messages on the component; if there are no errors, an empty Array is\r
     * returned.\r
     */\r
    getActiveErrors: function() {\r
        return this.activeErrors || [];\r
    },\r
\r
    /**\r
     * Set the active error message to an Array of error messages. The messages are formatted into a single message\r
     * string using the {@link #activeErrorsTpl}. Also see {@link #setActiveError} which allows setting the entire error\r
     * contents with a single string. Note that this only updates the error message element's text and attributes,\r
     * you'll have to call doComponentLayout to actually update the field's layout to match. If the field extends\r
     * {@link Ext.form.field.Base} you should call {@link Ext.form.field.Base#markInvalid markInvalid} instead.\r
     * @param {String[]} errors The error messages\r
     */\r
    setActiveErrors: function(errors) {\r
        var me = this,\r
            errorWrapEl = me.errorWrapEl,\r
            msgTarget = me.msgTarget,\r
            isSide = msgTarget === 'side',\r
            isQtip = msgTarget === 'qtip',\r
            actionEl, activeError, tpl, targetEl;\r
\r
        errors = Ext.Array.from(errors);\r
        tpl = me.getTpl('activeErrorsTpl');\r
\r
        me.activeErrors = errors;\r
        activeError = me.activeError = tpl.apply({\r
            fieldLabel: me.fieldLabel,\r
            errors: errors,\r
            listCls: Ext.baseCSSPrefix + 'list-plain'\r
        });\r
\r
        me.renderActiveError();\r
\r
        if (me.rendered) {\r
            actionEl = me.getActionEl();\r
            \r
            if (isSide) {\r
                me.errorEl.dom.setAttribute('data-errorqtip', activeError);\r
            }\r
            else if (isQtip) {\r
                actionEl.dom.setAttribute('data-errorqtip', activeError);\r
            }\r
            else if (msgTarget === 'title') {\r
                actionEl.dom.setAttribute('title', activeError);\r
            }\r
\r
            // If msgTarget is title, setting an alert is redundant for ARIA purposes\r
            if (msgTarget !== 'title') {\r
                me.ariaErrorEl.dom.innerHTML = errors.join('. ');\r
                actionEl.dom.setAttribute('aria-describedby', me.ariaErrorEl.id);\r
            }\r
            \r
            if (isSide || isQtip) {\r
                Ext.form.Labelable.initTip();\r
            }\r
\r
            if (!me.msgTargets[msgTarget]) {\r
                targetEl = Ext.get(msgTarget);\r
\r
                if (targetEl) {\r
                    targetEl.dom.innerHTML = activeError;\r
                }\r
            }\r
        }\r
\r
        if (errorWrapEl) {\r
            errorWrapEl.setVisible(errors.length > 0);\r
            if (isSide && me.autoFitErrors) {\r
                me.labelEl.addCls(me.topLabelSideErrorCls);\r
            }\r
            me.updateLayout();\r
        }\r
    },\r
\r
    /**\r
     * Clears the active error message(s). Note that this only clears the error message element's text and attributes,\r
     * you'll have to call doComponentLayout to actually update the field's layout to match. If the field extends {@link\r
     * Ext.form.field.Base} you should call {@link Ext.form.field.Base#clearInvalid clearInvalid} instead.\r
     */\r
    unsetActiveError: function() {\r
        var me = this,\r
            errorWrapEl = me.errorWrapEl,\r
            msgTarget = me.msgTarget,\r
            restoreDisplay = me.restoreDisplay,\r
            actionEl, targetEl;\r
\r
        if (me.hasActiveError()) {\r
            delete me.activeError;\r
            delete me.activeErrors;\r
            me.renderActiveError();\r
\r
            if (me.rendered) {\r
                actionEl = me.getActionEl();\r
                \r
                if (msgTarget === 'qtip') {\r
                    actionEl.dom.removeAttribute('data-errorqtip');\r
                }\r
                else if (msgTarget === 'title') {\r
                    actionEl.dom.removeAttribute('title');\r
                }\r
                \r
                if (msgTarget !== 'title') {\r
                    me.ariaErrorEl.dom.innerHTML = '';\r
                    actionEl.dom.removeAttribute('aria-describedby');\r
                }\r
\r
                if (!me.msgTargets[msgTarget]) {\r
                    targetEl = Ext.get(msgTarget);\r
\r
                    if (targetEl) {\r
                        targetEl.dom.innerHTML = '';\r
                    }\r
                }\r
\r
                if (errorWrapEl) {\r
                    errorWrapEl.hide();\r
                    if (msgTarget === 'side' && me.autoFitErrors) {\r
                        me.labelEl.removeCls(me.topLabelSideErrorCls);\r
                    }\r
                    me.updateLayout();\r
\r
                    // IE8 hack for https://sencha.jira.com/browse/EXTJS-17536.\r
                    // Need to force a relayout of the display:table form item.\r
                    // TODO: Remove when IE8 retires.\r
                    if (restoreDisplay) {\r
                        me.el.dom.style.display = 'block';\r
                        me.restoreDisplay();\r
                    }\r
                }\r
            }\r
        }\r
    },\r
\r
    doRestoreDisplay: function() {\r
        // IE8 hack for https://sencha.jira.com/browse/EXTJS-17536.\r
        // Need to force a relayout of the display:table form item.\r
        // TODO: Remove this method when IE8 retires.\r
        var el = this.el;\r
        if (el && el.dom) {\r
            el.dom.style.display = '';\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * Updates the rendered DOM to match the current activeError. This only updates the content and\r
     * attributes, you'll have to call doComponentLayout to actually update the display.\r
     */\r
    renderActiveError: function() {\r
        var me = this,\r
            activeError = me.getActiveError(),\r
            hasError = !!activeError;\r
\r
        if (activeError !== me.lastActiveError) {\r
            me.lastActiveError = activeError;\r
            me.fireEvent('errorchange', me, activeError);\r
        }\r
\r
        if (me.rendered && !me.destroyed && !me.preventMark) {\r
            me.toggleInvalidCls(hasError);\r
            // Update the errorEl (There will only be one if msgTarget is 'side' or 'under') with the error message text\r
            if (me.errorEl) {\r
                me.errorEl.dom.innerHTML = activeError;\r
            }\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * Add/remove invalid class(es)\r
     * @param {Boolean} hasError\r
     */\r
    toggleInvalidCls: function(hasError) {\r
        this.el[hasError ? 'addCls' : 'removeCls'](this.invalidCls);\r
    },\r
\r
    /**\r
     * Applies a set of default configuration values to this Labelable instance. For each of the properties in the given\r
     * object, check if this component hasOwnProperty that config; if not then it's inheriting a default value from its\r
     * prototype and we should apply the default value.\r
     * @param {Object} defaults The defaults to apply to the object.\r
     */\r
    setFieldDefaults: function(defaults) {\r
        var key;\r
\r
        for (key in defaults) {\r
            if (!this.hasOwnProperty(key)) {\r
                this[key] = defaults[key];\r
            }\r
        }\r
    }\r
}, function() {\r
    if (Ext.supports.Touch) {\r
        this.prototype.msgTarget = 'side';\r
    }\r
});\r