PDA

View Full Version : Column Data Tooltip



sjm133
18 Mar 2011, 6:44 AM
I'm doing some testing and using the grouping grid example. One of my columns will contain text that may or may not be longer than the defined column width. To see the entire text the user would have to drag the column border over to read it all.

I would like do the following:
1) Display a tooltip for the column data that would show the entire text value when the mouse is hovered over it
OR
2) be able to wrap the text within the column at the column border

Are either of these possible? If not, what's the solution?

Thanks in advance.

fay
18 Mar 2011, 7:13 AM
Both are possible using a column renderer (http://dev.sencha.com/deploy/dev/docs/?class=Ext.grid.Column&member=renderer):

1. Tooltip.



// ... Don't forget to initialise the quick tips for this work.
Ext.QuickTips.init();
// ...
function renderColumn(value, metaData, record, rowIndex, colIndex, store)
{
metaData.attr = 'ext:qtip="' + value + '"';
return value;
}


2. Wrap text. Use white-space style.



function renderColumn(value, metaData, record, rowIndex, colIndex, store)
{
metaData.attr = 'style="white-space:normal !important;"';
return value;
}

sjm133
18 Mar 2011, 9:57 AM
I appreciate the information, but I find it difficult to understand the specifics of implementing something like this. Are there any samples of this in use to reference?
Thanks.

fay
18 Mar 2011, 11:31 AM
Do you mean that you don't know how to use a renderer? See: http://dev.sencha.com/deploy/dev/examples/grid/array-grid.html and take a look at the source code in \examples\grid\array-grid.js.