我有一个问题，需要在一个fieldLabel旁边添加红色星号，当一个字段被标记为“必填”（或allowBlank: false）时。
在ExtJS3中，我们可以通过以下方式轻松地覆盖Ext.layout.FormLayout来实现这个哈克：
Ext.override(Ext.layout.FormLayout, {
getTemplateArgs: function(field) {
var noLabelSep = !field.fieldLabel || field.hideLabel;
var labelSep = (typeof field.labelSeparator == 'undefined' ? this.labelSeparator : field.labelSeparator);
if (!field.allowBlank) labelSep += '<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>';
return {
id: field.id,
label: field.fieldLabel,
labelStyle: field.labelStyle||this.labelStyle||'',
elementStyle: this.elementStyle||'',
labelSeparator: noLabelSep ? '' : labelSep,
itemCls: (field.itemCls||this.container.itemCls||'') + (field.hideLabel ? ' x-hide-label' : ''),
clearCls: field.clearCls || 'x-form-clear-left'
};
}
});
但是在 ExtJS4 中这是不可能的。 FormLayout 不再适用，标签实际上是通过使用名为 Ext.form.Labelable 的 mixins 由 Ext.form.field.Base 渲染的。
可悲的是，无论是扩展 Ext.form.Labelable 还是覆盖 Ext.form.Labelable 都对我无济于事。从 Ext.form.field.Base 扩展的组件不会受到任何影响。即使我交换了 mixins，模板仍然无法工作。
所以这里是我的解决方案，在 Ext.form.field.Base 上进行了非常严格的覆盖，它的工作原理如下（查看我的示例）
这仅适用于 ExtJS 4.0.7。要在 ExtJS 4.0.2a 上使用它，您需要根据 4.0.2a 中找到的一个修改 labelableRenderTpl /src/form/Labelable.js
(function() {
var overrides = {
labelableRenderTpl: [
'<tpl if="!hideLabel && !(!fieldLabel && hideEmptyLabel)">',
'<label id="{id}-labelEl"<tpl if="inputId"> for="{inputId}"</tpl> class="{labelCls}"',
'<tpl if="labelStyle"> style="{labelStyle}"</tpl>>',
'<tpl if="fieldLabel">{fieldLabel}{labelSeparator}</tpl>',
'<tpl if="!allowBlank"><span style="color:red">*</span></tpl>',
'</label>',
'</tpl>',
'<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,
disableFormats: true
}
],
/**
* @protected
* Generates the arguments for the field decorations {@link #labelableRenderTpl rendering template}.
* @return {Object} The template arguments
*/
getLabelableRenderData: function() {
var me = this,
labelAlign = me.labelAlign,
labelCls = me.labelCls,
labelClsExtra = me.labelClsExtra,
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 (labelAlign === 'top') {
labelStyle = 'margin-bottom:' + labelPad + 'px;';
} else {
labelStyle = 'margin-right:' + labelPad + 'px;';
// Add the width for border-box browsers; will be set by the Field layout for content-box
if (Ext.isBorderBox) {
labelStyle += 'width:' + me.labelWidth + 'px;';
}
}
return Ext.copyTo(
{
inputId: me.getInputId(),
fieldLabel: me.getFieldLabel(),
labelCls: labelClsExtra ? labelCls + ' ' + labelClsExtra : labelCls,
labelStyle: labelStyle + (me.labelStyle || ''),
subTplMarkup: me.getSubTplMarkup(),
allowBlank: me.allowBlank
},
me,
'hideLabel,hideEmptyLabel,fieldBodyCls,baseBodyCls,errorMsgCls,clearCls,labelSeparator',
true
);
}
};
//Both field.Base and FieldContainer are affected, so need to cater for.
Ext.override(Ext.form.field.Base, overrides);
Ext.override(Ext.form.FieldContainer, overrides);
})();
所以我给所有必填字段添加了漂亮的星号。
问题在于，有没有更容易实现类似功能的方式？覆盖方法比较严格，最好能使用mixin，但是mixin无法覆盖行为。
注意
这是因为我定制了需要从基本Text、Combo、FieldContainer扩展的字段。 扩展字段中的mixin甚至不会影响模板。它们太固执了。也许目前最好的方法是通过覆盖基类... 查看工作示例
Ext.form.field.Base中的Mixin。我想知道是否有更好的解决方案。 - Lionel Chan