View Full Version : ToolTip over GridPanel row with Ext.ux.DataTip

14 Feb 2012, 8:27 AM
I am trying to show the tooltip over *some* of grid rows depending on the record data.
I found a plugin Ext.ux.DataTip (http://www.sencha.com/forum/showthread.php?93905-OPEN-705-Built-in-dynamic-ToolTips-on-all-data-backed-widgets) written by Animal and it would work perfectly if the tooltip was to be displayed over every row.

var tipPlugin = new Ext.ux.DataTip({
html: '<div>This message may not be modified or re-sent.' +
'Messages created with the previous version of the system cannot be re-sent or modified.' +
listeners: {
beforeshow: function(tip, e) {
var idx = tip.triggerElement.rowIndex;
var rec = Ext.getCmp('messages-activations-crud').getStore().getAt(idx);
// only messages from legacy system do not have messageId
if(rec.get('messageId') === null || rec.get('messageId') === '') {
return true;
return false;

var grid = new Ext.grid.GridPanel({
plugins: [tipPlugin]

The problem is w/ *beforeshow* event. After grid is rendered and displayed and mouse is placed over row that does not need a tooltip, JS error is thrown. Like *beforeshow* returning false does not seem to prevent show() being called.
If the 1st row does need a tooltip displayed, then everything works as expected, tip is shown, and moving mouse oven any row that does not need a tooltip result in no errors and tip is not shown.

this.body is undefined
doAutoWidth(adjust=0)ext-all-debug.js (line 33024)
showAt(xy=[419, 300])ext-all-debug.js (line 33013)
showAt(xy=[419, 300])ext-all-debug.js (line 33390)
show()ext-all-debug.js (line 33375)
apply()ext-base.js (line 7)
[Break On This Error]

var bw = this.body.getTextWidth();

ext-all-debug.js (line 33024)

Appreciate your input.

14 Feb 2012, 8:39 AM
If an element has a ext:qtip attribute and Ext.QuickTips.init() has been done, it will automatically show the text from that attribute in a quicktip.

14 Feb 2012, 9:48 AM
but *beforeshow* returns false, should not it be preventing the tip?

beforeshow( Ext.Component this )
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.