Ext JS 4 – Adding qtip to a Gridpanel Cell

For one column in a grid I needed to display an image and I wanted a tooltip to display when the mouse is over the image. My custom renderer looks like this:

		var iconRenderer = function(value, meta, record, rowindx, colindx, store) {
			meta.tdCls = 'blocked';
			meta.tdAttr = 'data-qtip="Blocked"';
			return value;

The css for ‘blocked’ looks like this:

td.blocked {
	background: url(/images/stop.png) no-repeat center !important;

Thanks to http://existdissolve.com/2011/07/adding-qtips-to-gridpanel-rows-in-extjs-4-0/ for pointing out two important changes in Ext 4:

  1. The names of the fields on the meta object changed. tdAttr instead of attr
  2. The name for the qtip changed from qtip to data-qtip. The documentation about putting “data” in front of qtip is in the Ext JS documentation for the QuickTipManager.