How do I show a quicktip for grid rows?

[tirams]

I'd like to show a quicktip of the hidden column values when mousing over a row in a grid. Is this supported?

[dnixon]

I am interested in this also. So far the best I have been able to implement is
a custom grid cell renderer that displays the cell as a div with a tooltip (I use dynamic drive tooltip script), but I'd prefer to use a QuickTip.



// custom renderer with Dynamic Drive tooltip - tooltip is the record message body
function ddtipmessage(val, meta, rec, row, col, store) {
var msg = rec.get('body') || "no message";
msg = msg.replace(/(^\s*)|(\s*$)/gi,""); // remove leading/trailing whitespace
if(msg.length < 1) {
msg = "no message";
}
if(msg.length > 1024) {
msg = msg.substr(0,1024) + "...";
}
msg = msg.replace(/(")/g,""); // escape double quotes
msg = msg.replace(/(')/g,"\\'"); // escape single apostrophes
msg = msg.replace(/(\n)/g,"<br>"); // escape newlines

try {
var cmd = '<div class="ddtipmessage" onMouseover="ddrivetip(\'' + msg + '\',\'#D9E8FB\', 400)" onMouseout="hideddrivetip()">' + val + '</div>';
} catch(e) {
var cmd = '<div class="ddtipmessage" onMouseover="ddrivetip(\'' + "message body contains special characters - see detail panel below" + '\',\'#D9E8FB\', 400)" onMouseout="hideddrivetip()">' + val + '</div>';
} finally {
}
return cmd;
}

[tirams]

Upon better search I found this http://extjs.com/forum/showthread.php?t=953
which answered my question

so in ColumnModel where you can specify a renderer create one whose function sets the second arguments attr value to 'ext:qtip='+your_tip_data_here

[robasi]

That seems all good but what if you want to specify a quicktip for an entire row rather than each cell?

[cristi_vladan]

on cell renderer use this :


function updateTooltip(id) {
var html = 'new html ...' + id + ':' + new Date();
return html;
}
renderer: function (data, cell, rowData) {
cell.attr = 'ext:qtipf="updateTooltip(' + rowData.data.id + ')" ext:qwidth="400" ext:hide=false ext:qtitle="mf details"';
return Ext.util.Format.usMoney(data);
}


and overrides:

Ext.override(Ext.QuickTip, {
tagConfig : {
namespace : "ext",
attribute : "qtip",
width : "qwidth",
target : "target",
title : "qtitle",
hide : "hide",
cls : "qclass",
align : "qalign",
qtipf : "qtipf"

},

onTargetOver : function(e){
if(this.disabled){
return;
}
this.targetXY = e.getXY();
var t = e.getTarget();
if(!t || t.nodeType !== 1 || t == document || t == document.body){
return;
}
if(this.activeTarget && t == this.activeTarget.el){
this.clearTimer('hide');
this.show();
return;
}
if(t && this.targets[t.id]){
this.activeTarget = this.targets[t.id];
this.activeTarget.el = t;
this.delayShow();
return;
}
var ttp, et = Ext.fly(t), cfg = this.tagConfig;
var ns = cfg.namespace;
if(this.interceptTitles && t.title){
ttp = t.title;
t.qtip = ttp;
t.removeAttribute("title");
e.preventDefault();
} else{
ttp = et.getAttributeNS(ns, cfg.qtipf) || t.qtip || et.getAttributeNS(ns, cfg.attribute);
}
if(ttp){
var autoHide = et.getAttributeNS(ns, cfg.hide);
this.activeTarget = {
el: t,
text: ttp,
qtipf: et.getAttributeNS(ns, cfg.qtipf),
width: et.getAttributeNS(ns, cfg.width),
autoHide: autoHide != "user" && autoHide !== 'false',
title: et.getAttributeNS(ns, cfg.title),
cls: et.getAttributeNS(ns, cfg.cls),
align: et.getAttributeNS(ns, cfg.align)
};
this.delayShow();
}
},


showAt : function(xy){
var t = this.activeTarget;
if(t){
this.autoHide = t.autoHide;
this.closable = !t.autoHide;
this.autoDismiss = Ext.value(t.autoDismiss, true, false);
this.dismissDelay = t.dismissDelay || this.dismissDelay;
this.autoDismiss = Ext.value(t.autoDismiss, true, false);
if(!this.rendered){
this.render(Ext.getBody());
}
if(t.width){
this.setWidth(t.width);
this.measureWidth = false;
} else{
this.measureWidth = true;
}
this.setTitle(t.title || '');
if (t.qtipf)
this.body.update(eval(t.qtipf));
else this.body.update(t.text);
if(t.cls){
if(this.lastCls){
this.el.removeClass(this.lastCls);
}
this.el.addClass(t.cls);
this.lastCls = t.cls;
}
if(t.align){
xy = this.el.getAlignToXY(t.el, t.align);
this.constrainPosition = false;
} else{
this.constrainPosition = true;
}
}
Ext.QuickTip.superclass.showAt.call(this, xy);
}
});

Ext.override(Ext.Tip, {
showAt : function(xy){
Ext.Tip.superclass.show.call(this);
if (!this.tools.close) {
if (this.closable) {
this.addTool({
id: 'close',
handler: this.hide,
scope: this
});
};
} else this.tools.close.setDisplayed(this.closable);

if(this.measureWidth !== false){
var bw = this.body.getTextWidth();
if(this.title){
bw = Math.max(bw, this.header.child('span').getTextWidth(this.title));
}
bw += this.getFrameWidth() + (this.closable ? 20 : 0);
this.setWidth(bw.constrain(this.minWidth, this.maxWidth));
}
if(this.constrainPosition){
xy = this.el.adjustForConstraints(xy);
}
this.setPagePosition(xy[0], xy[1]);
}
});