*/
/**
- * @class Ext.form.Labelable
-
-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.
-
-**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}.
-
-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.)
-
-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.
-
- * @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 <jason@sencha.com>
*/
Ext.define("Ext.form.Labelable", {
requires: ['Ext.XTemplate'],
/**
- * @cfg {Array/String/Ext.XTemplate} labelableRenderTpl
+ * @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.
*/
labelableRenderTpl: [
'<tpl if="!hideLabel && !(!fieldLabel && hideEmptyLabel)">',
- '<label<tpl if="inputId"> for="{inputId}"</tpl> class="{labelCls}"<tpl if="labelStyle"> style="{labelStyle}"</tpl>>',
+ '<label id="{id}-labelEl"<tpl if="inputId"> for="{inputId}"</tpl> class="{labelCls}"',
+ '<tpl if="labelStyle"> style="{labelStyle}"</tpl>>',
'<tpl if="fieldLabel">{fieldLabel}{labelSeparator}</tpl>',
'</label>',
'</tpl>',
- '<div class="{baseBodyCls} {fieldBodyCls}"<tpl if="inputId"> id="{baseBodyCls}-{inputId}"</tpl> role="presentation">{subTplMarkup}</div>',
- '<div class="{errorMsgCls}" style="display:none"></div>',
+ '<div class="{baseBodyCls} {fieldBodyCls}" id="{id}-bodyEl" role="presentation">{subTplMarkup}</div>',
+ '<div id="{id}-errorEl" class="{errorMsgCls}" style="display:none"></div>',
'<div class="{clearCls}" role="presentation"><!-- --></div>',
{
compiled: true,
isFieldLabelable: true,
/**
- * @cfg {String} formItemCls
+ * @cfg {String} [formItemCls='x-form-item']
* A CSS class to be applied to the outermost element to denote that it is participating in the form
- * field layout. Defaults to 'x-form-item'.
+ * field layout.
*/
formItemCls: Ext.baseCSSPrefix + 'form-item',
/**
- * @cfg {String} labelCls
- * The CSS class to be applied to the label element. Defaults to 'x-form-item-label'.
+ * @cfg {String} [labelCls='x-form-item-label']
+ * 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} errorMsgCls
- * The CSS class to be applied to the error message element. Defaults to 'x-form-error-msg'.
+ * @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='x-form-error-msg']
+ * 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. Defaults to 'x-form-item-body'.
+ * @cfg {String} [baseBodyCls='x-form-item-body']
+ * 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 #fieldBodyCls}.
- * Defaults to empty.
*/
fieldBodyCls: '',
/**
- * @cfg {String} clearCls
+ * @cfg {String} [clearCls='x-clear']
* The CSS class to be applied to the special clearing div rendered directly after the field
- * contents wrapper to provide field clearing (defaults to <tt>'x-clear'</tt>).
+ * contents wrapper to provide field clearing.
*/
clearCls: Ext.baseCSSPrefix + 'clear',
/**
- * @cfg {String} invalidCls
- * The CSS class to use when marking the component invalid (defaults to 'x-form-invalid')
+ * @cfg {String} [invalidCls='x-form-invalid']
+ * 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. Defaults to undefined.
+ * configs.
*/
fieldLabel: undefined,
/**
* @cfg {Number} labelWidth
* The width of the {@link #fieldLabel} in pixels. Only applicable if the {@link #labelAlign} is set
- * to "left" or "right". Defaults to <tt>100</tt>.
+ * to "left" or "right".
*/
labelWidth: 100,
/**
* @cfg {Number} labelPad
- * The amount of space in pixels between the {@link #fieldLabel} and the input field. Defaults to <tt>5</tt>.
+ * The amount of space in pixels between the {@link #fieldLabel} and the input field.
*/
labelPad : 5,
/**
* @cfg {String} labelStyle
- * <p>A CSS style specification string to apply directly to this field's label. Defaults to undefined.</p>
+ * A CSS style specification string to apply directly to this field's label.
*/
/**
* @cfg {Boolean} hideLabel
- * <p>Set to <tt>true</tt> to completely hide the label element ({@link #fieldLabel} and {@link #labelSeparator}).
- * Defaults to <tt>false</tt>.</p>
- * <p>Also see {@link #hideEmptyLabel}, which controls whether space will be reserved for an empty fieldLabel.</p>
+ * 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,
* <p>When set to <tt>true</tt>, the label element ({@link #fieldLabel} and {@link #labelSeparator}) will be
* automatically hidden if the {@link #fieldLabel} is empty. Setting this to <tt>false</tt> 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 <tt>true</tt>.</p>
+ * to line up with other labeled fields in the same form.</p>
* <p>If you wish to unconditionall hide the label even if a non-empty fieldLabel is configured, then set
* the {@link #hideLabel} config to <tt>true</tt>.</p>
*/
/**
* @cfg {Boolean} preventMark
* <tt>true</tt> to disable displaying any {@link #setActiveError error message} set on this object.
- * Defaults to <tt>false</tt>.
*/
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 <tt>true</tt>.
+ * {@link #msgTarget error messages}.
*/
autoFitErrors: true,
/**
* @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.
*/
getLabelableRenderData: function() {
var me = this,
labelAlign = me.labelAlign,
+ labelCls = me.labelCls,
+ labelClsExtra = me.labelClsExtra,
labelPad = me.labelPad,
labelStyle;
{
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'
+ );
},
/**
/**
* 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 || [];
* 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 {Array} errors The error messages
+ * @param {String[]} errors The error messages
*/
setActiveErrors: function(errors) {
this.activeErrors = errors;
git.ithinksw.org / extjs.git / blobdiff