Qtips and Interceptor

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.