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.field.Baseと呼ばれる mixins を使用してレンダリングされExt.form.Labelableます。
悲しいことに、拡張もExt.form.LabelableオーバーライドExt.form.Labelableも私にとってはうまくいきません。からの拡張コンポーネントExt.form.field.Baseは、それから何の影響も受けません。ミックスインを交換しても、テンプレートは機能しません。
そこで、非常に厳しいオーバーライドを行った私のソリューションがここにあり、Ext.form.field.Base次のように機能します（私の例を確認してください）
これは ExtJS 4.0.7 専用です。ExtJS 4.0.2a で使用するには、4.0.2alabelableRenderTplにあるものに従って変更する必要があります。/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);
})();
そのため、必要なすべてのフィールドに素敵なアスタリスクを追加しました。
質問は、このようなことを達成する簡単な方法はありますか? オーバーライドは非常に厳しいもので、ミックスインを使用できれば最適ですが、ミックスインは動作をオーバーライドできません
ノート
この背後にある理由は、ベースから拡張する必要があるフィールドをカスタマイズしたためですText, Combo, FieldContainer. 拡張フィールドのミックスインは、テンプレートを混乱させることさえありません。彼らはあまりにも頑固です。おそらく、今のところ最善の方法は、 Base クラスをオーバーライドすることです...実際の例を確認してください