I wanted to do two things, demonstrate how to write a plug-in and make something useful that would help out those who see a need in having an easy to configure help icon / tool tip to use with their extjs form fields.
Don’t forget if you are going to use tool tips in your application you will have to initialize quick tips by adding the line below into your code.

Ext.QuickTips.init();

The end result of the plugin is to add the small help icon to the far right hand corner of the form field, and then add a tooltip with some text that helps the user understand what to do with the form field like maybe an explanation of the contents or some business rules that apply to the input.

In order to add the question mark to the field label you will need some CSS . I have provided the code below, please note that the question mark can be downloaded here, and then you would have to modify the image url to point to the correct folder.

.icon-help{background-image:url(../images/help.png) !important;background-repeat:no-repeat;background-position:center;}

To use the plugin after you write it just add the following line to your form field configuration, with the help text that you want to show up in the tooltip replacing the default text (‘Help button text’) in the snippet below. You may pass HTML code and it will be rendered as HTML. It is very important to note that you must use the xtype that contains the word field as the postfix or combobox otherwise the xtype value will not validate and the plugin will assume that you are trying to add it to an object that is not a field.

Now let’s get to the good stuff, writing our first plugin which will be used by just adding the line below to your form field element when you are done.

plugins: [new helpQtip('Help button text')]

Plugin Code

Now for the plugin itself. First if you take a look closely you see the following block of code:

return{
    init:function(me){

    }
}	

This block of code is required for all plugins and basically attaches this object to the parent allowing your new plugin to add functionality to the existing ext component. You see ‘me’ being passed; this is actually a reference to itself.

Next, the thing that kind of jumps out at you is Ext.Function.createSequence. This creates a combined sequence of the original function plus the passed function. The passed function is called after the original function. This is important in this case as we need the fields to render before we can query the dom and add the help icon div. If your plugin was to rely on a function that needed to be called before the original function you would need to use createSequence’s twin Ext.Function.createInterceptor.

Finally, if we are going to mess with render and add some div’s to the document for pete’s sake we will need to make sure we destroy then when the object gets destroyed. To accomplish this we add an interceptor to the destroy function and remove the div from the dom.

The source code for the plugin is below, hopefully this has given you enough information to get started on writing your own plugins.

helpQtip = function(txt) {
return {
init: function(me) {
	var label 	  = me.fieldLabel; 
	var xt  	  = me.getXType().substr(4);
	if (xt == 'field' || xt == 'obox'){
 // Add in custom onRender and on Destroy events
	var id  = me.getId(), lbl = me.getFieldLabel();
 // Get the fieldLabel element
    Ext.apply( me,{
    render: Ext.Function.createSequence(me.render,function(ct, position) {
        var domNode = Ext.DomQuery.select('*[id=' + id + '-labelEl]'); 
            if(domNode){	
                var tipTxt = '<b>Help</b><br><p>' + txt + '</p>'; 
                var tipWdth = domNode[0].offsetWidth * 2;	
                // Create the dom object that contains the question mark image
                var helpDiv = {
                    tag:'div',
                    id:id + '-help',
                    html:'&nbsp;',
                    cls:'icon-help',	                                          
               style:'display:inline;
                      cursor:help;width:25px;
                      float:right;padding:1px 1px 5px 1px;'
                    } // End var helpDiv
// Add the help div to the document
                Ext.DomHelper.append(domNode[0],helpDiv);
// Attach the help tool tip to the help div
                var tip = Ext.create('Ext.tip.ToolTip', {
                    target:id + '-help',
                    html: tipTxt,
                    minWidth:tipWdth,
                    title:lbl,
                    autoHide:false,
                    closable:true,
                    closeAction:'hide'
                });
	  }// End of if(domNode)
	}), // End of render Sequence
	destroy:  Ext.Function.createSequence(me.destroy,function() {
		var helpDomNode = Ext.DomQuery.select('*[id=' + id + '-help]'); 	
		if(helpDomNode){
			Ext.removeNode(helpDomNode);
		}
	}) // End of Destroy Sequence
	})// End of Ext.apply
	}// End of if (xt == 'field') 
}// End Init Function 
};
};