View Full Version : QuickTip of Cell Contents

8 Aug 2007, 6:59 AM
Trying to figure this out, and I'm banging my head a bit. I am using ExtJS 1.1. How, within a data grid (Grid) can I apply a quicktip to the contents of a cell.

Sometimes the content of the cell appears truncated because it extends beyond the width of the cell. I would like to show that content in a tip on mouseover, rather than requiring the user to resize the column. The ideal would be to only do this should the content be truncated, but I would take it either way at this point.

Any suggestions?

8 Aug 2007, 3:05 PM
youre in luck, i just went through this yesterday.

yourGrid.on('mouseover', function(e, t) {
row = yourGrid.getView().findRowIndex(t);
col = yourGrid.getView().findCellIndex(t);
if (t.className == 'x-grid-cell-text') {
cell = yourGrid.getView().getCellText(row,col);
if (cell.firstChild.nodeValue.length > 1) { //check if the cell is empty or too long, check for specific rows/columns, etc
cell.qtip = cell.firstChild.nodeValue;

note that the mouseover event gets called multiple times during a mouse move, so for performance reasons you may want to add code that only sets the qtip if the mouse moves into a different cell or something similar.
now if only we could update qtips while they are displayed ;) (yes i know, wait for 2.0...)

10 Aug 2007, 3:43 PM
I would change the relevant CSS to allow text wrapping.

But if thats not an option I would add the qtip on a cell renderer.


cellRender: function(value,p){
//Set the QTip
p.attr = 'ext:qtip="'+Ext.util.Format.htmlEncode('QTip message') +'"';

return value;