Add color to fieldlabel - extjs

Question

I would like to put a red asterisk after a fieldlabel in order to say the user must fill the field. Is there a way to add directly css code in the js code? Like the parameter style for example but only for the asterisk
var blablaField = new Ext.form.TextField({
fieldLabel : 'Name *',
allowBlank : false,
width : 300
});

Answer 1

You have at least three (IMO) clean ways to archive this:
To do it automatically do it for any field that didn't allow blank you should use a custom form extension like this.
Ext.define('Ext.ux.form', {
extend: 'Ext.form.Panel',
initComponent: function() {
var me = this;
me.on('beforeadd', function(form, field){
if (!field.allowBlank)
field.labelSeparator += '<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>';
});
me.callParent(arguments);
}
});
If you just want to do it for one field you can use the afterLabelTextTpl or the afterLabelTpl config property and apply something like
<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>
Or you can add it directly to the label-text like
fieldLabel : 'Name<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>'
Where the first is the one I like most because you need to do nothing extra expect setting the required flag.
Edit
If you don't wan't to apply the asterix to any field that does not allow blank when it get's added to the form you may introduce a new property like skipLabelAppendix. You may set this property to any field that should not get the asterix appended after the label. And don't forget to include it into the form like so
me.on('beforeadd', function(form, field){
if (!field.allowBlank && !field.skipLabelAppendix)
field.labelSeparator += '<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>';
});

Answer 2

An approach that you might find more elegant is adding a css class to any field label that is marked with allowBlank=false and style your mandatory indicator in CSS.
Ext.define('Ext.ux.form', {
extend: 'Ext.form.Panel',
listeners: {
'beforeadd': function(){
if (!field.allowBlank) {
field.labelClsExtra = 'x-required';
}
}
}
});
You can then style your field label in CSS with an :after pseudo utility:
.x-required:after {
content: ' *';
color: red;
font-weight: bold;
}