4

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

2 Answers 2

5

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>';
      });
5
  • And if you don't want this to apply to every single field with allowBlank in your form, consider turning this into a plugin that can be added on a field-by-field basis. You'd still get the flexibility of using form defaults, but not require it if you only need it for particular required fields. Jul 11, 2013 at 10:24
  • @existdissolve Well IMO there are no benefits when I create a plugin for that because I have to add it to all fields. This may depend on my personal style because it is perfectly valid and I may oversee something here. Anyway I would more recommend to introduce a new property on fields that allow to skip the asterix appendix. See my edit.
    – sra
    Jul 11, 2013 at 10:57
  • 1
    Agreed. I'm not suggesting it's more beneficial than adding like you did to the form itself. Just another option. One benefit of having a plugin would be for fields that aren't necessarily in a form, such as items in a toolbar. Jul 11, 2013 at 11:41
  • Instead of simply checking "if (!field.allowBlank)" , a better idea would be to use :: if( typeof field.allowBlank != 'undefined' && !field.allowBlank ) This would make sure that fields that do not have the allowBlank property are not selected and tagged . Jun 3, 2014 at 21:15
  • @RoshanKhandelwal The default value for allowBlank is true. You are doing something wrong if you end up with undefined
    – sra
    Jun 4, 2014 at 6:54
4

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.