У меня есть проблема, когда мне нужно добавить красную звездочку рядом с 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 с использованием миксинов, называемых 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, вам нужно изменить labelableRenderTpl в соответствии с тем, который найден в 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);
})();
Итак, у меня есть хорошая звездочка, добавленная во все обязательные поля.
Вопрос в том, есть ли более простой способ добиться чего-то подобного? Переопределение довольно резкое, лучше всего, если мы можем использовать миксины, но миксины не могут переопределить поведение
Примечание
Причина этого заключается в том, что у меня есть настраиваемые поля, которые необходимо расширить от базы Text, Combo, FieldContainer. Миксины в расширенном поле даже не связываются с шаблоном . Они просто слишком упрямы. Возможно, лучший способ на данный момент - переопределить базовый класс ... Проверьте рабочий пример