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.
Advertisements

One comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s