ExtJS 4 - 在必填字段上标记一个红色星号 [英] ExtJS 4 - Mark a red asterisk on an required field
问题描述
我有这个问题，当一个字段被标记为必填"(或 allowBlank: false)时，我需要在 fieldLabel 旁边添加一个红色星号
I have this problem where I need to add a red asterisk beside a fieldLabel when a field is marked as "required" (or allowBlank: false)
在 ExtJS3 中，我们可以通过如下覆盖 Ext.layout.FormLayout 来轻松实现这个 hack:
In ExtJS3, we can have this hack easily by overriding Ext.layout.FormLayout as follow:
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.field.Base 使用名为 Ext.form.Labelable 的 mixins 呈现>.
But this is impossible in ExtJS4. FormLayout is no longer applicable, and labels are in fact rendered by Ext.form.field.Base by using a mixins called Ext.form.Labelable.
遗憾的是，扩展 Ext.form.Labelable 或覆盖 Ext.form.Labelable 对我来说都不可行.Ext.form.field.Base 的扩展组件不会受到它的任何影响.即使我交换了 mixin，模板仍然不起作用.
Sadly, neither extending the Ext.form.Labelable or overriding Ext.form.Labelable is workable for me. The extended components from Ext.form.field.Base does not receive any effect from it. Even if I swapped the mixins, the templates still would not work.
所以我的解决方案来了，我对 Ext.form.field.Base 做了一个非常苛刻的覆盖，它的工作原理如下(看看我的例子)
So here come my solution, where I did a very harsh override over Ext.form.field.Base, and it works as follow (Check out my example)
这仅适用于 ExtJS 4.0.7.要在 ExtJS 4.0.2a 上使用它，您需要根据 4.0.2a /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);
})();
所以我在所有必填字段中添加了漂亮的星号.
And so I have the nice asterisk added to all the required fields.
问题是，有没有更简单的方法来实现这样的目标?覆盖非常苛刻，最好我们可以使用 mixins，但 mixin 不能覆盖行为
注意
这背后的原因是因为我自定义了需要从基础Text、Combo、FieldContainer 扩展的字段.扩展字段中的混合甚至不会与模板混淆.他们只是太固执了.也许现在最好的方法是覆盖基类...查看工作示例
The reason behind this is because I have customized fields that needed to be extended from the base Text, Combo, FieldContainer. Mixins in the extended field doesn't even mess with the template. They are just too stubborn. Perhaps the best way for now is by overriding the Base class... Check out the working example
推荐答案
我有一个更短的解决方案.我建议像这样使用表单的beforeadd"事件:
I have a little bit shorter solution. I suggest to use form's 'beforeadd' event like this:
Ext.define('Ext.ux.form', {
extend: 'Ext.form.Panel',
initComponent: function() {
this.on('beforeadd', function(me, field){
if (!field.allowBlank)
field.labelSeparator += '<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>';
});
this.callParent(arguments);
}
});
这是演示
这篇关于ExtJS 4 - 在必填字段上标记一个红色星号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
