X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/7a654f8d43fdb43d78b63d90528bed6e86b608cc..HEAD:/src/form/Labelable.js
diff --git a/src/form/Labelable.js b/src/form/Labelable.js
index a892395e..54ddc4b2 100644
--- a/src/form/Labelable.js
+++ b/src/form/Labelable.js
@@ -1,45 +1,57 @@
-/**
- * @class Ext.form.Labelable
+/*
+
+This file is part of Ext JS 4
-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. {@link Ext.form.field.Base} and {@link Ext.form.FieldContainer}
-to let them be managed by the Field layout.
+Copyright (c) 2011 Sencha Inc
-**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
-{@link Ext.form.field.Base} or {@link Ext.form.FieldContainer}.
+Contact: http://www.sencha.com/contact
-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 {@link Ext.form.field.Field}
-mixin. These two mixins may be used separately (for example {@link Ext.form.FieldContainer} is Labelable but not a
-Field), or in combination (for example {@link Ext.form.field.Base} implements both and has logic for connecting the
-two.)
+GNU General Public License Usage
+This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
-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.
+If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
- * @markdown
+*/
+/**
+ * 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 A CSS style specification string to apply directly to this field's label. Defaults to undefined. Set to true to completely hide the label element ({@link #fieldLabel} and {@link #labelSeparator}).
- * Defaults to false. Also see {@link #hideEmptyLabel}, which controls whether space will be reserved for an empty fieldLabel. 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. Defaults to true.
If you wish to unconditionall hide the label even if a non-empty fieldLabel is configured, then set * the {@link #hideLabel} config to true.
*/ @@ -177,14 +196,13 @@ Ext.define("Ext.form.Labelable", { /** * @cfg {Boolean} preventMark * true to disable displaying any {@link #setActiveError error message} set on this object. - * Defaults to false. */ preventMark: false, /** * @cfg {Boolean} autoFitErrors * Whether to adjust the component's body area to make room for 'side' or 'under' - * {@link #msgTarget error messages}. Defaults to true. + * {@link #msgTarget error messages}. */ autoFitErrors: true, @@ -206,7 +224,7 @@ Ext.define("Ext.form.Labelable", { /** * @cfg {String} activeError * If specified, then the component will be displayed with this value as its active error when - * first rendered. Defaults to undefined. Use {@link #setActiveError} or {@link #unsetActiveError} to + * first rendered. Use {@link #setActiveError} or {@link #unsetActiveError} to * change it after component creation. */ @@ -246,6 +264,8 @@ Ext.define("Ext.form.Labelable", { getLabelableRenderData: function() { var me = this, labelAlign = me.labelAlign, + labelCls = me.labelCls, + labelClsExtra = me.labelClsExtra, labelPad = me.labelPad, labelStyle; @@ -265,47 +285,41 @@ Ext.define("Ext.form.Labelable", { { inputId: me.getInputId(), fieldLabel: me.getFieldLabel(), + labelCls: labelClsExtra ? labelCls + ' ' + labelClsExtra : labelCls, labelStyle: labelStyle + (me.labelStyle || ''), subTplMarkup: me.getSubTplMarkup() }, me, - 'hideLabel,hideEmptyLabel,labelCls,fieldBodyCls,baseBodyCls,errorMsgCls,clearCls,labelSeparator', + 'hideLabel,hideEmptyLabel,fieldBodyCls,baseBodyCls,errorMsgCls,clearCls,labelSeparator', true ); }, - /** - * @protected - * Returns the additional {@link Ext.AbstractComponent#renderSelectors} for selecting the field - * decoration elements from the rendered {@link #labelableRenderTpl}. Component classes using this mixin should - * be sure and merge this method's result into the component's {@link Ext.AbstractComponent#renderSelectors} - * before rendering. - */ - getLabelableSelectors: function() { - return { + onLabelableRender: function () { + this.addChildEls( /** * @property labelEl - * @type Ext.core.Element + * @type Ext.Element * The label Element for this component. Only available after the component has been rendered. */ - labelEl: 'label.' + this.labelCls, + 'labelEl', /** * @property bodyEl - * @type Ext.core.Element + * @type Ext.Element * The div Element wrapping the component's contents. Only available after the component has been rendered. */ - bodyEl: '.' + this.baseBodyCls, + 'bodyEl', /** * @property errorEl - * @type Ext.core.Element + * @type Ext.Element * 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: '.' + this.errorMsgCls - }; + 'errorEl' + ); }, /** @@ -349,6 +363,11 @@ Ext.define("Ext.form.Labelable", { * 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) { @@ -360,7 +379,7 @@ Ext.define("Ext.form.Labelable", { /** * 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 {Array} The active error messages on the component; if there are no errors, an empty Array is returned. + * @return {String[]} The active error messages on the component; if there are no errors, an empty Array is returned. */ getActiveErrors: function() { return this.activeErrors || []; @@ -370,7 +389,12 @@ Ext.define("Ext.form.Labelable", { * 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. - * @param {Array} errors The error messages + * + * 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) { this.activeErrors = errors; @@ -379,7 +403,11 @@ Ext.define("Ext.form.Labelable", { }, /** - * Clears the active error. + * 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; @@ -439,3 +467,4 @@ Ext.define("Ext.form.Labelable", { } }); +