By Lionel Chan


2011-10-31 05:53:30 8 Comments

I have this problem where I need to add a red asterisk beside a fieldLabel when a field is marked as "required" (or allowBlank: 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 by Ext.form.field.Base by using a mixins called Ext.form.Labelable.

Sadly, neither extending the Ext.form.Labelable or overriding Ext.form.Labelable is workable for me. The extended components from Ext.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

11 comments

@Mayur Gite 2015-10-29 10:26:12

Their are so many ways to do this and few of which you can find above, what I am suggesting is:

 {
    xtype : 'label',
    html:'<span>First Name</span><span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>',
    width:50,
 }

Simply you can put both asterisk and Label text in single html property.

@Evan Siroky 2014-06-19 01:59:48

If you don't want to override anything, put the asterisk in the labelSeparator:

{
  xtype: 'textfield',
  fieldLabel: 'Name',
  name: 'requestor_name',
  allowBlank: false,
  labelSeparator : ': <span style="color:red">*</span>'
}

@sandeep vanama 2014-06-18 05:40:31

If you want red * to be displayed for a field label we can use fieldlabel which does this.

For example the below code creates new text field with label name "Name" and red asterisk is displayed

var name = new Ext.form.TextField({
    fieldLabel : 'Label<span style=\"color:red;\" ext:qtip=\"This field is required\"> *</span>',
    name : 'name',
    id: 'Name',
    maxLength : 40,
    width : 205,
    allowBlank : false
});

@Hady 2014-05-02 00:17:22

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

@Esteban Gatjens 2013-11-26 19:10:12

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.

@Drasill 2013-01-17 16:14:13

I've made a plugin for this.

Works this ExtJS 4.1 (at least).

Use if like this :

Ext.create('Ext.form.Panel', {
  ...
  plugins : "formlabelrequired"
  ...
});

Or, to customize the "asterisk":

Ext.create('Ext.form.Panel', {
  ...
  plugins : [{ptype:"formlabelrequired", asterisk:" (mandatory)"}]
  ...
});

Here is the code for the plugin :

/**
 * Plugin (ptype = 'formlabelrequired') that adds "asterisk" to labels
 * for Fields with "allowBlank: false".
 */
Ext.define('Ext.ux.plugin.form.LabelRequired', {

        extend: 'Ext.AbstractPlugin',

        alias: 'plugin.formlabelrequired',

        asterisk: ' <span class="required"> *</span>',

        constructor: function() {

            this.callParent(arguments);

        },

        init: function(formPanel) {
            formPanel.on('beforerender', this.onBeforeRender, this);
        },

        /**
         * @private
         * Adds asterisk to labels.
         */
        onBeforeRender: function(formPanel) {

            var i, len, items;

            items = formPanel.query('[allowBlank=false]');

            for (i = 0, len = items.length; i < len; i++) {
                item = items[i];
                item.afterLabelTextTpl = (item.afterLabelTextTpl || "") + this.asterisk;
            }

            return true;

        }

    });

@Varun Achar 2012-09-10 07:02:57

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

@John Gordon 2012-10-18 13:59:23

I've created a file directly under the app directory, Overrides.js. I hook it into my app by adding Overrides.js in the require[] array in my app.js file. Works great, thanks for the idea!

@Varun Achar 2012-10-18 14:02:37

Yup.. that's how i use it too.. :)

@Jonathan Morales Vélez 2013-12-18 21:29:30

you can set labelClsExtra property instead to be more flexible. I believe that having a css class to identify the labels for required fields is a better approach. I used this.labelClsExtra = 'x-form-required-field'; and then in the css something like label.x-form-required-field { text-decoration: underline; }

@Christiaan Westerbeek 2012-05-15 09:57:23

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

@Chao 2011-11-06 05:04:17

Actually I think using fieldSubTpl and/or labelableRenderTpl to add the * is a cleaner approach than using the event listener. Events can be stopped, listeners can be detached.

I think OP(Lionel Chan)'s concern was that using Ext.override is kinda hacky and he's 100% right. But if we pass the custom tpl in at the form configuration level it's not that bad:

Ext.create('Ext.form.Panel',{
    defaults:{
        fieldSubTpl:['<input id="{id}" type="{type}" ', 
        '<tpl if="name">name="{name}" </tpl>', 
        '<tpl if="size">size="{size}" </tpl>', 
        '<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>', 
        'class="{fieldCls} {typeCls}" autocomplete="off" />',
        '<span>',
        '<tpl if="allowBlank==false">*</tpl>',
        '</span>',
        {
            compiled: true, 
            disableFormats: true
    }]},
    items : [{
        xtype : 'textfield',.....

There could be something wrong with the tpl, i haven't tried.

@nscrob 2011-11-06 09:30:26

It is a cleaner aproach, but also a wrong aproach. Setting defaults like fieldSubTpl is wrong because even if they say in the docs that it belongs to Ext.form.field.Base and it has a default value, actualy is overriden in almost any other field classes. As for labelableRenderTpl, we can override the class and modify the tpl or, to just set it into defaluts as base field only takes it form labelable if he doesn't have one defined. But again the issue is that to the labelableRenderTpl the allowBlank data is not sent given that is not considered necesary for the label.

@Chao 2011-11-07 15:15:02

agreed to both of your points regarding labelableRenderTpl and fieldSubTpl. I was thinking maybe the right way is to treat the blank state as an error state, somehow style the * using "invalidText" and "msgTarget" . and call "validate" when the field is rendered. so the * will show up because the initial value is invalid.

@Lionel Chan 2011-11-08 10:35:40

no that method is kind of harsh because you will even get red waves rendered under invalid fields and it looks fatal! :)

@Chao 2011-11-08 14:15:21

haha, true, but we can style that. I guess what I am trying to do is to use as much stock ExtJS as possible while making sure there is a separation of concern between the view and the logic.

@Lionel Chan 2011-11-09 11:46:41

But I still think 4 lines of hack is far more powerful than tons of modifications. My form is defined so there is less permutation over the cancelled events so it should be fine.

@Molecular Man 2011-11-03 17:09:11

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

@Lionel Chan 2011-11-04 01:04:10

I have included your code in my extended Panel and it works great! If there is no better answer then you'll probably get the bounty :) Thou both answers looks great but yours is better since I have already have an extended form.Panel in used. Thanks a lot man! Great hack!

@Tiago Sippert 2013-05-08 16:53:27

I know that allowBlank is only a config and not a property, but in case you set allowBlank = true after the component is rendered, this won´t work.

@Dev 2013-10-11 11:27:25

It is really useful.Great work!! :-)

@nscrob 2011-11-03 17:52:54

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

@Molecular Man 2011-11-03 18:23:41

Nice! I personaly would also use extending the anchor layout instead of overriding.

@Lionel Chan 2011-11-03 22:56:23

You guys made me hard to decide. I love both answers! Damn! I will credit you guys few days later ok? Both workable but I prefer Molecule as I have extended an custom form panel as well, so most likely I will use his (no need to dirt the js file or open up another js file)

Related Questions

Sponsored Content

5 Answered Questions

[SOLVED] Explain ExtJS 4 event handling

9 Answered Questions

[SOLVED] How to create custom ExtJS form field component?

  • 2011-05-27 14:04:53
  • pcjuzer
  • 34371 View
  • 31 Score
  • 9 Answer
  • Tags:   forms extjs extjs4

5 Answered Questions

[SOLVED] adding asterisk to required fields in bootstrap 3?

3 Answered Questions

[SOLVED] How to change required field asterisk in ExtJs 4.2

  • 2013-08-19 19:44:32
  • paulodiovani
  • 1746 View
  • 0 Score
  • 3 Answer
  • Tags:   extjs extjs4.2

1 Answered Questions

how to mark (*) in red for mandatory field in extjs 3.4

  • 2014-01-22 13:20:54
  • Naresh
  • 718 View
  • 1 Score
  • 1 Answer
  • Tags:   extjs extjs3

1 Answered Questions

[SOLVED] ExtJS Model - Concatenate fields

  • 2013-09-26 14:45:13
  • dougajmcdonald
  • 4460 View
  • 6 Score
  • 1 Answer
  • Tags:   extjs extjs4

1 Answered Questions

[SOLVED] ExtJS 4.1: Override mixins

1 Answered Questions

[SOLVED] ExtJS 4: Image in form field?

2 Answered Questions

[SOLVED] Simple Line Chart with Dates?

  • 2012-01-24 17:59:27
  • user568866
  • 4101 View
  • 0 Score
  • 2 Answer
  • Tags:   extjs4

Sponsored Content