View Full Version : Mouseover on a particular cell on a grid

13 Aug 2009, 2:01 AM
I have applied a custom css attribute to an editable cell using a renderer funtion on my column model

var myCellRenderer = function(value, metaData, record, rowIndex, colIndex, store) {

if (record.get('status') == 'complete') { // replace with your condition
metaData.css = 'editableCell';

return value;

var cm = new Ext.grid.ColumnModel({
{header: "Title", width: 160, renderer: renderTopic, dataIndex: 'title'},
{header: "Time Remaining", width: 60, renderer: timeRenderer , dataIndex: 'dueDate'},
{header: "Status", width: 40, dataIndex: 'status'},
{header: "Satisfied", width: 50, dataIndex: 'satis', renderer: myCellRenderer, editor: combo}
,isCellEditable: function(col, row) {
var record = store.getAt(row);
if (record.get('status') == 'complete') {

return Ext.grid.ColumnModel.prototype.isCellEditable.call(this, col, row);

return false;
});Later I have tried to attach an event listener on this cell using the delegate option on the on method
Unfortunately it is attaching the event to all cells and not just the cells that have the 'editableCell' class.

I have used the code below to attch the listener.

console.log('Cell over is ',t);
delegate: '.editableCell'
});Can anyone advise why this is not working as I expect?
Maybe there is a better way to capture mouseovers on editable grid cells?


13 Aug 2009, 3:19 AM
I think a cellmouseover and rowmouseover events on the GridPanel are well overdue!

But you are using the Component's Observable click event. These types of events do not accept a "delegate" option because Observable events are not necessarily DOM related. They are just events which might be fired by Components at some "interesting moment".

You need to add the listener to the View's mainBody Element.


Remember that this will not exist until the GridPanel has been rendered.

13 Aug 2009, 4:54 AM
Thanks Animal

That did the trick. Code below in case it helps anyone else.

var view = grid.getView();

console.log('Cell over is ',t) ;
delegate: '.editableCell'

I think a cellmouseover and rowmouseover events on the GridPanel are well overdue!Agreed. I read the API a few times assuming they would be standard events on the grid.
It would be very handy to have these events on components that have HTML structured in this way.

13 Aug 2009, 6:06 AM
I've added an enhancement request to the internal system.

16 Aug 2009, 2:18 AM
Here's a plugin which might help: http://extjs.com/forum/showthread.php?p=374480

16 Aug 2009, 2:59 AM
I will try it out tomorrow and let you know how I get on

16 Aug 2009, 5:57 AM
Thanks Animal
I could not wait until tomorrow
I gave it a quick go and it works a treat

Had to reference the events as cellmouseenter and not cellmousenter as you have at the top of your post for the plugin. The other "enter" events are the same.

When I have finished the UI widget I will post my example with your plugin as a means of showing what your plugin provides. If you are ok with this I will add it your plugin thread?

16 Aug 2009, 12:33 PM
I'll fix the event name cellmouseenter is correct.