ExtJS 4.x form field Quicktips with required asterisk on field labels

The below gist will add Ext quicktips to all child elements of a form/component that have a fieldLabel and qtip property set.

If the allowBlank property is set to false, the fieldLabel will get a red asterisk ( * ) before the label text and the text required appended to the end of the quicktip hover element.


/*Call this method after the form has rendered, so either on the afterrender event, or from within a
method bound to that or a similar event that is fired after the form/component has rendered.
Pass the name/id of the form in a way that can be accessed using an ext component query.
In your view/form items array, for each element that you want to have a quicktip, set the property
qtip: 'your tooltip text here.'
If you want the required asterisk and text, set the property allowBlank: false
e.g.
{ name: 'dateArrived', xtype: 'datefield', fieldLabel: 'Date Arrived', qtip: 'Date customer arrived.', allowBlank: false }
*/
/**
* Loops through all child elements of the passed component (form) and checks for and applies
* any tooltips found with the QuickTipManager.
* @param formName – the name of the component(form) to look for qtip properties.
*/
setupQuickTips: function(formName){
Ext.tip.QuickTipManager.init();
Ext.Array.forEach(Ext.ComponentQuery.query(formName + ' *'), function(el){
if (el.qtip){
if (el.fieldLabel && el.allowBlank == false) el.setFieldLabel('<a class="required-ast">*</a>' + el.getFieldLabel());
if (el.allowBlank == false) el.qtip += '<a class="required">&nbsp;&nbsp;required</a>';
Ext.QuickTips.register({
target: el.id,
text: el.qtip
});
}
});
}
/*CSS Styles used by the quicktip required anchors.*/
.required {
fontsize: 10px;
color: #d10000 !important;
lineheight: 14px;
}
.requiredast {
fontsize: 10px;
color: #d10000 !important;
position: absolute;
margintop: 3px;
marginleft: 7px;
}

The styles at the bottom of the gist will need to be added to an active stylesheet.

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s