/** * @private * A mixin that adds boxLabel capabilities to Checkbox and Slider fields */Ext.define('Ext.field.BoxLabelable', { extend: 'Ext.Mixin', mixinConfig: { id: 'boxLabelable', after: { initElement: 'afterInitElement' } }, config: { /** * @cfg {String} * An optional label that will appear next to the input within the field body area. * Displays immediately before or after the input depending on {@link #boxLabelAlign} */ boxLabel: null, /** * @cfg {'before'/'after'} [boxLabelAlign='after'] * The position relative to the input where the {@link #boxLabel} should appear */ boxLabelAlign: null }, boxLabeledCls: Ext.baseCSSPrefix + 'box-labeled', getBodyTemplate: function() { return [{ reference: 'boxWrapElement', cls: Ext.baseCSSPrefix + 'box-wrap-el', children: [{ reference: 'boxElement', cls: Ext.baseCSSPrefix + 'box-el', children: this.getBoxTemplate() }, { tag: 'label', reference: 'boxLabelElement', cls: Ext.baseCSSPrefix + 'box-label-el' }] }]; }, getBoxTemplate: Ext.emptyFn, updateBoxLabel: function(boxLabel) { this.boxLabelElement.setHtml(boxLabel); this.el.toggleCls(this.boxLabeledCls, !!boxLabel); }, updateBoxLabelAlign: function(boxLabelAlign, oldBoxLabelAlign) { var me = this, el = me.el; if (oldBoxLabelAlign) { el.removeCls(Ext.baseCSSPrefix + 'box-label-align-' + oldBoxLabelAlign); } if (boxLabelAlign) { el.addCls(Ext.baseCSSPrefix + 'box-label-align-' + boxLabelAlign); } }, afterInitElement: function() { var inputElement = this.inputElement; if (inputElement) { this.boxLabelElement.dom.setAttribute('for', inputElement.id); } } });