How to mark required field with asterisk in Ext JS textfield labels

Question

I need to add red asteriks to multiple form fields with the allowBlank property set as false in screens that extend the screen below. I've tried the solution here: ExtJS 4 - Mark a red asterisk on an required field but it isn't working. Is there some way I can add the functionality in the initComponent function?

Ext.define('APP.view.ux.visual.screen.UxClassicScreen', {
extend: 'Ext.form.Panel',
alias: 'widget.uxclassicscreen',

config: {
    layout: 'vbox'
},

initComponent: function(){
    var viewModel = this.getViewModel(),
        controller = this.getController();
    if(viewModel != null && controller != null){
        viewModel.set('isKiosk', controller.isKiosk());
    }
    this.callParent();
}
});

score 3 · Accepted Answer · edited Oct 22 '20 at 15:14

For adding this behavior to all your fields, you can override Ext.form.field.Base, for example:

Ext.define('MyApp.overrides.form.field.Base', {
    override: 'Ext.form.field.Base',

    initLabelable: function () {
        this.callParent(arguments);

        if (this.fieldLabel && this.allowBlank === false) {
            this.labelSeparator += '<span class="mandatory">*</span>';
        }
    }
});

How to mark required field with asterisk in Ext JS textfield labels

1 Answers1