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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*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"> 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; | |
| } |
The styles at the bottom of the gist will need to be added to an active stylesheet.
brianbar.net 