PDA

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



andycramb
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({
columns:[
{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.


grid.on('mouseover',function(e,t){
console.log('Cell over is ',t);
},
this,
{
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?

Thanks

Animal
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.

http://extjs.com/deploy/ext-3.0.0/docs/?class=Ext.grid.GridView&member=mainBody

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

andycramb
13 Aug 2009, 4:54 AM
Thanks Animal

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



var view = grid.getView();

view.mainBody.on('mouseover',function(e,t){
console.log('Cell over is ',t) ;
},
this,
{
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.

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

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

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

andycramb
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?

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