ExtJS 4 - 在必填字段上标记一个红色星号 [英] ExtJS 4 - Mark a red asterisk on an required field
问题描述
我有这个问题，当一个字段被标记为必需（或 allowBlank：）时，我需要在） fieldLabel 旁边添加一个红色的星号false
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 如下：
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 通过使用mixin称为 Ext.form.Labelable 。
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。可贴标签或覆盖 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中找到的 labelableRenderTpl 进行修改
(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，但是mixins不能覆盖行为
注意
背后的原因是因为我有自定义的字段，需要从基础扩展文本，组合， FieldContainer 。 扩展字段中的混合模式甚至不会混淆模板。他们太顽固了。也许现在最好的方法是覆盖Base类... 查看工作示例
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);
}
});
这是 demo
这篇关于ExtJS 4 - 在必填字段上标记一个红色星号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
