Skip to content

Instantly share code, notes, and snippets.

@brian3kb
Last active Dec 23, 2015
Embed
What would you like to do?
Add quicktips to extjs 4 form elements and mark required elements with a red asterisk and the text 'required' in the qtip text body.
/*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 {
font-size: 10px;
color: #d10000 !important;
line-height: 14px;
}
.required-ast {
font-size: 10px;
color: #d10000 !important;
position: absolute;
margin-top: -3px;
margin-left: -7px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment