tooltip

Ext JS 4: Poor Man’s Input Field Dynamic Help

I wanted to put a dynamic tool tip on some input fields in a form in my application. I wanted to use Ext JS Quicktip, but it wasn’t quite what I wanted, because I wanted the tip to show on focus, not mouse hover. I created a very simple one in Ext JS 4.0.7, by doing the following.

1. After render of my panel I added the following code to define the tip. It is just a basic tip


Ext.define('My.Panel', {
	extend: 'Ext.panel.Panel',
	
	// All your configs, initializations, etc.

	afterRender : function () {
		this.callParent(arguments);
		this.fieldHelp = Ext.create('Ext.tip.Tip', {
			shadow: false
		});
	}
});

2. For the input fields where I want the tooltip to show, I added a fieldHelp config and listeners for the focus and blur events.

{
	name: 'myField',
	fieldLabel: 'Name',
	// Usual configs here
	fieldHelp: 'Help text specific to this field',
	listeners: {
		scope: this,
		focus: this.onFieldFocus,
		blur: this.onFieldBlur
	}
}

3. Last, the onFieldFocus and onFieldBlur handlers:

onFieldFocus : function (el) {
	var text = el.fieldHelp,
		xy;
	if (typeof text !== "undefined") {
		xy = el.getEl().getAnchorXY('r');
		xy[0] += 5;
		xy[1] -= 4;
		this.fieldHelp.update(text);
		this.fieldHelp.fieldId = el.id;
		this.fieldHelp.showAt(xy);
	}
},

onFieldBlur : function (el) {
	if (this.fieldHelp.isVisible() && this.fieldHelp.fieldId === el.id) {
		this.fieldHelp.hide();
	}
},

And there you have it, simple, dynamic help that appears to the right of a field when the field has focus.

Update 8/2 – not sure why I didn’t put in a screenshot before, but here is one. The focus is on the template name field, so the help is shown. As soon as the focus changes, the help is hidden.

Advertisements