View Full Version : mouseover grid column

Sai Dasika
2 Mar 2010, 1:32 AM
I need to know how to trigger a function on mouseover a specific grid column,so that i can use get the row number of that column in the function.

Sai Dasika.

2 Mar 2010, 1:50 AM
You need to start using the "Search" facility at the top of *this* page ;) as this has been covered several times. Take a look at http://www.extjs.com/forum/showthread.php?t=77730

2 Mar 2010, 2:26 AM
And in fact that idea has been expanded to pass events through to the Column class to make that observable:


So then you can just add a "mouseover" listener to your column definition.

Sai Dasika
2 Mar 2010, 3:21 AM
couldn't complete my doubt due to some problem this thread got submitted. I'll put it differently.

I have a grid with six columns. One column data is a big string.I need to have this shortened like this..

data="Hello i want this data to have only 30 characters and the whole data should be shown on mouseover".

this should become --->"Hello i want this data to have only 30 characters..." and on mouse over the whole data should be displayed.

We considered another column containing the whole data,but is taking a large load time.SO,the same record should be shown like the above and on mouse over it is used to show the whole data.

2 Mar 2010, 3:35 AM
So every time the user moves the mouse over that "data" cell you are going to make another call to your server to get the full text...??? Yikes, that could be painful.

If it is taking too long to load the data, perhaps consider using paging (http://www.extjs.com/learn/Ext_FAQ_Grid#Paging.2C_Paging_toolbar.2C_Total_record_count)...

Sai Dasika
2 Mar 2010, 3:40 AM
I am not going to make a new server call. i send a json with the whole string.But in the grid the whole string should not appear as in my example. i am able to mouseover the cell and get the data.

original data in json sent from the server
data="The string is too large so it should be truncated and displayed in the grid"

Data to be shown in the grid in the column is

"The string is too large so it...." -->I should be able to mask the data in the grid like this..

So,that in the grid it shows a truncated data but i should be able to retrieve the whole data in the tooltip.

Sai Dasika

2 Mar 2010, 4:06 AM
Add a renderer for your "data" column, something like:

function renderData(value, cell, record, rowIndex, colIndex, store)
cell.attr = 'ext:qtip="' + value + '"';
return Ext.util.Format.ellipsis(value, 30, false);