Ext JS Grid Panel: How to show content on mousehover

Question

I am displaying a ext JS grid panel with 2 columns. I have to keep fixed width of both columns. My problem is that when a text is displayed in 1st column and when it exceeds its width, I don't have any way to see the entire text (I can manually stretch it but because of fixed width it doesn't show sometimes). May be anyone know How can I do it-

I mean - I can show the text on mousehover but I want it to display text if user keeps mouse pointer more than 5 sec otherwise it will be too annoying; if user takes his mouse from 1st row to last.

Any other idea would also be helpful.

Answer 1

Add the following style to your stylesheet:

.wordwrap {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word;
    white-space: normal; /* Internet Explorer 5.5+ */
}

and then include it in the 'cls' config of your column:

columns: [{
    header: "Column 1",
    dataIndex: 'Col1',
    cls: 'wordwrap'
}]

That should wrap your grid cell's contents.