Recently I had come across scinario where I had to create a help icon next to field label. Initially I thought of putting regular tooltip on the field label with below
steps.
1.
enable quiktips –
Ext.onReady(function(){
Ext.QuickTips.init();
……….
});
2.
use ext:qtip –
{ xtype: 'textfield',
fieldLabel:'Item 2 <span style="color:green;" ext:qtip="This is help
text">?</span>'
}
So when you hover over ‘?’, it gives you
help message or information for the field.
Now, lets say you need to do the same thing
for lot more fields in the application, repeating the same way span with style
is not a good idea. You need to put level of abstraction on top of the
textfields and that’s where interceptor
comes in picture.
Interceptor performs the action before the
control loads; it executes the same code with intercepting and adding snippet.
Basically its kind of extends the base class, and right before the execution it
intercept and manipulates the functionality and add the visual or operational behavior.
Take a look at below code –
Ext.intercept(Ext.form.Field.prototype,
'initComponent', function() {
var lbl = this.fieldLabel,
var msg = this.helpMsg;
if (!Ext.isEmpty(msg) &&
!Ext.isEmpty(lbl)) {
this.fieldLabel = lbl+'<span class=’info-icon’
ext:qtip="'+msg+'"/> ';
}
});
and your field label definition would be –
{
xtype: 'textfield',
fieldLabel:'Item 2’,
helpMsg: ‘<b>This
is help text</b><br>For any question reachout to admin@admin.com'
}
And for all
the textfields in the form you should be able to use helpMsg config option
seamless.
