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.id, c.fieldLabel,
this.getLabelStyle(c.labelStyle),
this.elementStyle||'',
labelSep,
(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;
}
if(position){
this.fieldTpl.insertBefore(position, args);
}else{
this.fieldTpl.append(target, args);
}
c.render('x-form-el-'+c.id);
}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 {
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'
};
}
});

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

Tagged with: , ,
Posted in Sencha ExtJS

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 https://walkingtree.tech/index.php/blog for all latest blogs.

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

Recent Publication
%d bloggers like this: