Adding a red asterisk to the required form fields

In the application development, there are instances when we have to indicate a mandatory form field by showing a red asterisk next to the field label.

Mandatory field with red asterisk

Mandatory field with red asterisk

The code here overrides the private function of the Ext.form.FormLayout and works with a custom property required. I chose the form layout as the rendering of the labels is taken care by this layout. Other option was to use the allowBlank property but just to keep things simple I have used the custom config required.

For ExtJS version 2.2.x

Ext.override(Ext.layout.FormLayout, {
renderItem : function(c, position, target){
if(c && !c.rendered && c.isFormField && c.inputType != 'hidden'){
var labelSep = typeof c.labelSeparator == 'undefined' ? this.labelSeparator : c.labelSeparator;
if (c.required) labelSep += '<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>';

var args = [, c.fieldLabel,
(c.itemCls||this.container.itemCls||'') + (c.hideLabel ? ' x-hide-label' : ''),
c.clearCls || 'x-form-clear-left'
if(typeof position == 'number'){
position = target.dom.childNodes[position] || null;
this.fieldTpl.insertBefore(position, args);
this.fieldTpl.append(target, args);
}else {
Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);

For ExtJs version 3.0.x

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.required) labelSep += '<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>';
return {
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'

Following is a typical usage:
fieldLabel: ‘Patient Id’,
xtype: ‘textfield’,
required: true

Tagged with: , ,
Posted in Sencha ExtJS

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

We Have Moved Our Blog!

We have moved our blog to our company site. Check out for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Do More. With Sencha.

Recent Publication
%d bloggers like this: