extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/form/Label.js

@@ -0,0 +1,110 @@
+/**
+ * @docauthor Jason Johnston <jason@sencha.com>
+ *
+ * Produces a standalone `<label />` element which can be inserted into a form and be associated with a field
+ * in that form using the {@link #forId} property.
+ * 
+ * **NOTE:** in most cases it will be more appropriate to use the {@link Ext.form.Labelable#fieldLabel fieldLabel}
+ * and associated config properties ({@link Ext.form.Labelable#labelAlign}, {@link Ext.form.Labelable#labelWidth},
+ * etc.) in field components themselves, as that allows labels to be uniformly sized throughout the form.
+ * Ext.form.Label should only be used when your layout can not be achieved with the standard
+ * {@link Ext.form.Labelable field layout}.
+ * 
+ * You will likely be associating the label with a field component that extends {@link Ext.form.field.Base}, so
+ * you should make sure the {@link #forId} is set to the same value as the {@link Ext.form.field.Base#inputId inputId}
+ * of that field.
+ * 
+ * The label's text can be set using either the {@link #text} or {@link #html} configuration properties; the
+ * difference between the two is that the former will automatically escape HTML characters when rendering, while
+ * the latter will not.
+ *
+ * # Example
+ * 
+ * This example creates a Label after its associated Text field, an arrangement that cannot currently
+ * be achieved using the standard Field layout's labelAlign.
+ * 
+ *     @example
+ *     Ext.create('Ext.form.Panel', {
+ *         title: 'Field with Label',
+ *         width: 400,
+ *         bodyPadding: 10,
+ *         renderTo: Ext.getBody(),
+ *         layout: {
+ *             type: 'hbox',
+ *             align: 'middle'
+ *         },
+ *         items: [{
+ *             xtype: 'textfield',
+ *             hideLabel: true,
+ *             flex: 1
+ *         }, {
+ *             xtype: 'label',
+ *             forId: 'myFieldId',
+ *             text: 'My Awesome Field',
+ *             margin: '0 0 0 10'
+ *         }]
+ *     });
+ */
+Ext.define('Ext.form.Label', {
+    extend:'Ext.Component',
+    alias: 'widget.label',
+    requires: ['Ext.util.Format'],
+
+    autoEl: 'label',
+
+    /**
+     * @cfg {String} [text='']
+     * The plain text to display within the label. If you need to include HTML
+     * tags within the label's innerHTML, use the {@link #html} config instead.
+     */
+    /**
+     * @cfg {String} forId
+     * The id of the input element to which this label will be bound via the standard HTML 'for'
+     * attribute. If not specified, the attribute will not be added to the label. In most cases you will be
+     * associating the label with a {@link Ext.form.field.Base} component, so you should make sure this matches
+     * the {@link Ext.form.field.Base#inputId inputId} of that field.
+     */
+    /**
+     * @cfg {String} [html='']
+     * An HTML fragment that will be used as the label's innerHTML.
+     * Note that if {@link #text} is specified it will take precedence and this value will be ignored.
+     */
+    
+    maskOnDisable: false,
+
+    getElConfig: function(){
+        var me = this;
+
+        me.html = me.text ? Ext.util.Format.htmlEncode(me.text) : (me.html || '');
+        return Ext.apply(me.callParent(), {
+            htmlFor: me.forId || ''
+        });
+    },
+
+    /**
+     * Updates the label's innerHTML with the specified string.
+     * @param {String} text The new label text
+     * @param {Boolean} [encode=true] False to skip HTML-encoding the text when rendering it
+     * to the label. This might be useful if you want to include tags in the label's innerHTML rather
+     * than rendering them as string literals per the default logic.
+     * @return {Ext.form.Label} this
+     */
+    setText : function(text, encode){
+        var me = this;
+        
+        encode = encode !== false;
+        if(encode) {
+            me.text = text;
+            delete me.html;
+        } else {
+            me.html = text;
+            delete me.text;
+        }
+        
+        if(me.rendered){
+            me.el.dom.innerHTML = encode !== false ? Ext.util.Format.htmlEncode(text) : text;
+        }
+        return this;
+    }
+});
+

data/app/assets/javascripts/extjs-rails/src/form/Labelable.js

@@ -0,0 +1,764 @@
+/**
+ * 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 <jason@sencha.com>
+ */
+Ext.define("Ext.form.Labelable", {
+    requires: ['Ext.XTemplate'],
+
+    autoEl: {
+        tag: 'table',
+        cellpadding: 0
+    },
+
+    childEls: [
+        /**
+         * @property {Ext.Element} labelCell
+         * The `<TD>` Element which contains the label Element for this component. Only available after the component has been rendered.
+         */
+        'labelCell',
+
+        /**
+         * @property {Ext.Element} labelEl
+         * The label Element for this component. Only available after the component has been rendered.
+         */
+        'labelEl',
+
+        /**
+         * @property {Ext.Element} bodyEl
+         * The div Element wrapping the component's contents. Only available after the component has been rendered.
+         */
+        'bodyEl',
+
+        /**
+         * @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'
+    ],
+
+    /**
+     * @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 `label:align: 'left|top'`:
+     *
+     *      +----------------------+------------+---------+--------------+
+     *      | Label:               | InputField           | sideErrorEl |
+     *      +----------------------+------------+---------+-------------+
+     *      |                      | underErrorEl (colspan=3)           |
+     *      +-----------------------------------------------------------+
+     *
+     * Or, if `labelAlign: 'top'`:
+     *
+     *      +-----------------------------------------------------------+
+     *      | labelAlign:'top' label: (colspan=3)                       |
+     *      +----------------------+------------+---------+-------------+
+     *      | InputField (colspan=2)                      | sideErrorEl |
+     *      +----------------------+------------+---------+-------------+
+     *      | underErrorEl (colspan=3)                                  |
+     *      +-----------------------------------------------------------+
+     *
+     * The total columns always adds up to 3 (even if `labelAlign: 'top'`) 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.
+     *
+     * 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: [
+
+        // Top TR if labelAlign =='top'
+        '<tpl if="labelAlign==\'top\'">',
+            '<tr>',
+                '<td id="{id}-labelCell" colspan="3" 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>',
+            '</tr>',
+        '</tpl>',
+
+        // body row. If a heighted Field (eg TextArea, HtmlEditor, this must greedily consume height.
+        '<tr id="{id}-inputRow" <tpl if="inFormLayout">id="{id}"</tpl>>',
+
+            // Label cell
+            '<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>',
+
+            // Body of the input. That will be an input element, or, from a TriggerField, a table containing an input cell and trigger cell(s)
+            '<td class="{baseBodyCls} {fieldBodyCls}" id="{id}-bodyEl" role="presentation" colspan="{bodyColspan}">',
+                '{beforeSubTpl}',
+                '{[values.$comp.getSubTplMarkup()]}',
+                '{afterSubTpl}',
+            '</td>',
+
+            // Side error element
+            '<tpl if="msgTarget==\'side\'">',
+                '<td id="{id}-errorEl" class="{errorMsgCls}" style="display:none" width="{errorIconWidth}"></td>',
+            '</tpl>',
+        '</tr>',
+
+        // Under error element is another TR
+        '<tpl if="msgTarget==\'under\'">',
+            '<tr>',
+                // Align under the input element
+                '<tpl if="labelOnLeft">',
+                    '<td></td>',
+                '</tpl>',
+                '<td id="{id}-errorEl" class="{errorMsgClass}" colspan="{[values.labelOnLeft ? 2 : 3]}" style="display:none"></td>',
+            '</tr>',
+        '</tpl>',
+        {
+            disableFormats: true
+        }
+    ],
+
+    /**
+     * @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: [
+        '<tpl if="errors && errors.length">',
+            '<ul><tpl for="errors"><li>{.}</li></tpl></ul>',
+        '</tpl>'
+    ],
+
+    /**
+     * @property {Boolean} isFieldLabelable
+     * Flag denoting that this object is labelable as a field. Always true.
+     */
+    isFieldLabelable: true,
+
+    /**
+     * @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',
+
+    /**
+     * @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',
+
+    /**
+     * @cfg {String} labelClsExtra
+     * An optional string of one or more additional CSS classes to add to the label element. Defaults to empty.
+     */
+
+    /**
+     * @cfg {String} errorMsgCls
+     * The CSS class to be applied to the error message element.
+     */
+    errorMsgCls: Ext.baseCSSPrefix + 'form-error-msg',
+
+    /**
+     * @cfg {String} baseBodyCls
+     * The CSS class to be applied to the body content element.
+     */
+    baseBodyCls: Ext.baseCSSPrefix + 'form-item-body',
+
+    /**
+     * @cfg {String} fieldBodyCls
+     * An extra CSS class to be applied to the body content element in addition to {@link #baseBodyCls}.
+     */
+    fieldBodyCls: '',
+
+    /**
+     * @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',
+
+    /**
+     * @cfg {String} invalidCls
+     * The CSS class to use when marking the component invalid.
+     */
+    invalidCls : Ext.baseCSSPrefix + 'form-invalid',
+
+    /**
+     * @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,
+
+    /**
+     * @cfg {String} labelAlign
+     * Controls the position and alignment of the {@link #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 {@link #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 {@link #labelWidth} config.
+     */
+    labelAlign : 'left',
+
+    /**
+     * @cfg {Number} labelWidth
+     * The width of the {@link #fieldLabel} in pixels. Only applicable if the {@link #labelAlign} is set to "left" or
+     * "right".
+     */
+    labelWidth: 100,
+
+    /**
+     * @cfg {Number} labelPad
+     * The amount of space in pixels between the {@link #fieldLabel} and the input field.
+     */
+    labelPad : 5,
+
+    /**
+     * @cfg {String} labelSeparator
+     * Character(s) to be inserted at the end of the {@link #fieldLabel label text}.
+     */
+    //<locale>
+    labelSeparator : ':',
+    //</locale>
+
+    /**
+     * @cfg {String} labelStyle
+     * A CSS style specification string to apply directly to this field's label.
+     */
+
+    /**
+     * @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,
+
+    /**
+     * @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,
+
+    /**
+     * @cfg {Boolean} preventMark
+     * true to disable displaying any {@link #setActiveError error message} set on this object.
+     */
+    preventMark: false,
+
+    /**
+     * @cfg {Boolean} autoFitErrors
+     * Whether to adjust the component's body area to make room for 'side' or 'under' {@link #msgTarget error messages}.
+     */
+    autoFitErrors: true,
+
+    /**
+     * @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',
+
+    /**
+     * @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.
+     */
+
+    /**
+     * @private
+     * Tells the layout system that the height can be measured immediately because the width does not need setting.
+     */
+    noWrap: true,
+
+    labelableInsertions: [
+        /**
+         * @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',
+
+        /**
+         * @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',
+
+        /**
+         * @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',
+
+        /**
+         * @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',
+
+        /**
+         * @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',
+
+        /**
+         * @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',
+
+        /**
+         * @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'
+    ],
+
+    labelableRenderProps: 'allowBlank,labelAlign,fieldBodyCls,baseBodyCls,clearCls,labelSeparator,msgTarget',
+
+    /**
+     * 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 "
+        me.lastActiveError = '';
+
+        me.addEvents(
+            /**
+             * @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'
+        );
+    },
+
+    /**
+     * Returns the label for the field. Defaults to simply returning the {@link #fieldLabel} config. Can be overridden
+     * to provide
+     * @return {String} The configured field label, or empty string if not defined
+     */
+    getFieldLabel: function() {
+        return this.fieldLabel || '';
+    },
+    
+    /**
+     * 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,
+            last;
+        
+        me.fieldLabel = label;
+        if (me.rendered) {
+            if (Ext.isEmpty(label) && me.hideEmptyLabel) {
+                labelEl.parent().setDisplayed('none');
+            } else {
+                if (separator) {
+                    last = label.substr(label.length - 1);
+                    // append separator if necessary
+                    if (last != separator) {
+                        label += 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;
+    },
+
+    /**
+     * Generates the arguments for the field decorations {@link #labelableRenderTpl rendering template}.
+     * @return {Object} The template arguments
+     * @protected
+     */
+    getLabelableRenderData: function() {
+        var me = this,
+            data,
+            tempEl;
+
+        if (!Ext.form.Labelable.errorIconWidth) {
+            Ext.form.Labelable.errorIconWidth = (tempEl = Ext.getBody().createChild({style: 'position:absolute', cls: Ext.baseCSSPrefix + 'form-invalid-icon'})).getWidth();
+            tempEl.remove();
+        }
+
+        data = Ext.copyTo({
+            inFormLayout   : me.ownerLayout && me.ownerLayout.type === 'form',
+            inputId        : me.getInputId(),
+            labelOnLeft    : me.labelAlign != 'top',
+            fieldLabel     : me.getFieldLabel(),
+            labelCellStyle : me.getLabelCellStyle(),
+            labelCellAttrs : me.getLabelCellAttrs(),
+            labelCls       : me.getLabelCls(),
+            labelStyle     : me.getLabelStyle(),
+            bodyColspan    : me.getBodyColspan(),
+            errorMsgCls    : me.errorMsgCls + (me.autoFitErrors ? '' : ' ' + Ext.baseCSSPrefix + 'external-error-icon'),
+            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);
+        }
+    },
+    
+    /**
+     * 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 && !this.getFieldLabel());
+    },
+
+    /**
+     * @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,
+            hideLabelCell = !me.hasVisibleLabel(),
+            result;
+
+            // In the base case, the body cell spans itself, the triggerWrap cell, and the sideErrorEl by default, so 3
+            // If the label cell is hidden, or on the row above, the body cell must span the left label cell too, so 4
+            // TriggerFields which show the trigger cell, decrement this in the subclass implementation.
+            result = (hideLabelCell || me.labelAlign === 'top') ? 3 : 2;
+
+            if (me.hasActiveError()) {
+                result--;
+            }
+
+            return result;
+    },
+    
+    getLabelCls: function(){
+        var labelCls = this.labelCls,
+            labelClsExtra = this.labelClsExtra;
+            
+        return labelClsExtra ? labelCls + ' ' + labelClsExtra : labelCls;
+    },
+
+    getLabelCellStyle: function() {
+        var me = this,
+            hideLabelCell = me.hideLabel || (!me.fieldLabel && me.hideEmptyLabel);
+
+        return hideLabelCell ? 'display:none;' : '';
+    },
+
+    getLabelCellAttrs: function() {
+        var me = this,
+            labelAlign = me.labelAlign,
+            result = '';
+
+        if (labelAlign !== 'top') {
+            result = 'valign="top" halign="' + labelAlign + '" width="' + (me.labelWidth + me.labelPad) + '"';
+        }
+        return result + ' class="' + Ext.baseCSSPrefix + 'field-label-cell"';
+    },
+    
+    /**
+     * 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') {
+            labelStyle = 'margin-bottom:' + labelPad + 'px;';
+        } else {
+            if (me.labelWidth) {
+                labelStyle = 'width:' + me.labelWidth + 'px;';
+            }
+            labelStyle += 'margin-right:' + labelPad + 'px;';
+        }
+        
+        return labelStyle + (me.labelStyle || '');
+    },
+
+    /**
+     * 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 '';
+    },
+
+    /**
+     * 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.
+     * @return {String} The input id
+     */
+    getInputId: function() {
+        return '';
+    },
+
+    /**
+     * 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 || '';
+    },
+
+    /**
+     * 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();
+    },
+
+    /**
+     * 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);
+    },
+
+    /**
+     * 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 || [];
+    },
+
+    /**
+     * 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();
+    },
+
+    /**
+     * 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();
+    },
+
+    /**
+     * @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 && !me.isDestroyed && !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;
+            }
+        }
+    },
+
+    /**
+     * 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;
+                }
+            }
+        }
+    }
+});