Add color to fieldlabel

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>';
      });