ExtJS 4 - Mark a red asterisk on an required field
Solution 1
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);
}
});
Here is demo
Solution 2
You can still override the layout component similar to extjs3 bun given that there is no fieldLayout, I've overriden Ext.layout.Layout
. It's quite similar to molecule man's solution but it's more general. Working for fields used in other containers than forms.
Ext.override(Ext.layout.Layout, {
renderItem: function(item, target, position) {
if (item && !item.rendered && item.isFieldLabelable && item.fieldLabel && item.allowBlank == false) {
item.fieldLabel += ' <span class="req" style="color:red">*</span>';
}
this.callOverridden(arguments);
}
});
This is simpler than your solution but not necesarely better, se example also used in fieldsets here
Solution 3
You can also override and extend nothing and just create a controller action like so:
Ext.define('MyApp.controller.MyForm', {
extend: 'Ext.app.Controller',
markMandatoryFields: function(field, options) {
if (field && field.isFieldLabelable && field.fieldLabel && field.allowBlank == false) {
field.fieldLabel += ' <span class="req" style="color:red">*</span>';
}
},
init: function() {
this.control({
"field": {
beforerender: this.markMandatoryFields
}
});
}
});
Solution 4
For Ext JS 4.1.1 this works:
Ext.define('com.ideas.widgets.Base', {
override : 'Ext.form.field.Base',
initComponent : function()
{
if(this.allowBlank!==undefined && !this.allowBlank)
{
if(!this.labelSeparator)
{
this.labelSeparator = "";
}
this.labelSeparator += '<span style="color:red">*</span>';
}
this.callParent(arguments);
}
});
Solution 5
Extjs 4.1
When the field has a fieldLabel use:
fieldLabel: 'Name',
allowBlank: false,
afterLabelTextTpl: "<span style="color:red;font-weight:bold" data-qtip="Required">*</span>"
If the field don't have a fieldLabel use a combination of config options, the hideLabel config must be false:
//hideLabel: false
name: 'lastName',
emptyText: "Last Name",
allowBlank: false,
labelWidth: 0,
fieldLabel: '',
hideEmptyLabel: false,
afterLabelTextTpl: '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>'
Also, you can mix this solution with Drasill plugin an have a easy way to customise all fields at once.
Lionel Chan
Full stack software engineer. Main framework Laravel, Angular, React.
Updated on July 12, 2022Comments
-
Lionel Chan almost 2 years
I have this problem where I need to add a red asterisk beside a
fieldLabel
when a field is marked as "required" (orallowBlank: false
)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' }; } });
But this is impossible in ExtJS4.
FormLayout
is no longer applicable, and labels are in fact rendered byExt.form.field.Base
by using a mixins calledExt.form.Labelable
.Sadly, neither extending the
Ext.form.Labelable
or overridingExt.form.Labelable
is workable for me. The extended components fromExt.form.field.Base
does not receive any effect from it. Even if I swapped the mixins, the templates still would not work.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)This is for ExtJS 4.0.7 only. To use it on ExtJS 4.0.2a you need to modify the
labelableRenderTpl
according to the one found in 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.
Question is, is there any easier way to achieve something like this? Overriding is pretty harsh, best if we can use mixins, but mixins cannot override the behavior
Note
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