cellmouseenter and cellmouseleave etc for GridPanel

[Animal]

Here's a plugin for a GridPanel which extends that instance to offer the events



headermouseenter
headermouseleave
rowmouseenter
rowmouseleave
cellmouseenter
cellmouseleave



It also adds these events to Columns of the Grid for when Columns become Observable as I'm sure they must ( http://www.extjs.com/forum/showthread.php?p=379560#post379560 )

columnrmouseenter
columnmouseleave





Ext.ns("Ext.ux.grid");
Ext.ux.grid.GridMouseEvents = (function() {

function onMouseOver(e) {
processMouseOver.call(this, 'mouseenter', e);
}

function onMouseOut(e) {
processMouseOver.call(this, 'mouseleave', e);
}

function processMouseOver(name, e){
var t = e.getTarget(),
r = e.getRelatedTarget(),
v = this.view,
header = v.findHeaderIndex(t),
hdEl, row, rowEl, cell, fromCell, col;
if(header !== false){
hdEl = Ext.get(v.getHeaderCell(header));
if (!((hdEl.dom === r) || hdEl.contains(r))) {
this.fireEvent('header' + name, this, header, e, hdEl);
}
}else{
row = v.findRowIndex(t);
if(row !== false) {
rowEl = Ext.get(v.getRow(row));
if (!((rowEl.dom === r) || rowEl.contains(r))) {
this.fireEvent('row' + name, this, row, e, rowEl);
}
cell = v.findCellIndex(t);
if(cell !== false){
cellEl = Ext.get(v.getCell(row, cell));
if (!((cellEl.dom === r) || cellEl.contains(r))){
this.fireEvent('cell' + name, this, row, cell, e, cellEl);
}
if (cell != v.findCellIndex(r)) {
col = this.colModel.getColumnAt(cell);
if (col.processEvent) {
col.processEvent(name, e, this, row, cell);
}
this.fireEvent('column' + name, this, cell, e);
}
}
}
}
}

function onGridRender() {
this.mon(this.getGridEl(), {
scope: this,
mouseover: onMouseOver,
mouseout: onMouseOut
});
}

return {
init: function(g) {
g.onRender = g.onRender.createSequence(onGridRender);
}
};
})();


To use it just add



plugins: [ Ext.ux.grid.GridMouseEvents ],


To grid configs. And the listeners needed, obviously.

Use this for showing transitory contextual information relevant only to the cell or row targeted.

[MD]

Right on! =D>

[andycramb]

A bit more testing and it is working perfectly
I changed the arguments on the fireEvent for the cell


this.fireEvent('cell' + name, this, row, cell, e, cellEl);
As I noticed you already had the Ext cell object and saved me the cost of getting it within the listener. Maybe useful to pass the Ext row object as well.

Thanks again

[Animal]

Yes, definitely a good idea. I'll add it.

[Animal]

You know, in the long run all these value-added events need to pass the event as the first argument so that the signature matches regular DOM listeners, and people can use them interchangeably.

[andycramb]

Animal I am working on FF but would the closing comma on this function be an issue in IE?



function onGridRender() {
this.mon(this.getGridEl(), {
scope: this,
mouseover: onMouseOver,
mouseout: onMouseOut,
});
}
As an aside I am looking through your code and I was looking to find out more about mon
A search on the API reveals nothing for it. Do you know if it is explained anywhere?

[Animal]

Yep. I never use the horror that is IE.

[Condor]

Regarding 'mon':

'mon' acts the same as 'on'/'addListener', but also stores a reference to the handler in the component, so it can be automatically removed ('un'/'removeListener') when the component is destroyed.

There is also an 'mun' method (undoes a 'mon').

[mystix]

Regarding 'mon':

'mon' acts the same as 'on'/'addListener', but also stores a reference to the handler in the component, so it can be automatically removed ('un'/'removeListener') when the component is destroyed.

There is also an 'mun' method (undoes a 'mon').

oooh. nice summary =D>

i wonder why it isn't documented though.
it definitely comes in handy when writing UXes / plugins.

[Condor]

i wonder why it isn't documented though.
it definitely comes in handy when writing UXes / plugins.

Properties and methods that are only used for UXes and plugins fall in the 'protected' category, which aren't picked up by the API docs builder.

Maybe the API docs builder should be modified to include protected docs, but hide them initially (only to be made visible by a toggle button in the upper left corner).

ps. 'mon' isn't marked 'protected' at this moment and is missing documentation.

[mystix]

Properties and methods that are only used for UXes and plugins fall in the 'protected' category, which aren't picked up by the API docs builder.

Maybe the API docs builder should be modified to include protected docs, but hide them initially (only to be made visible by a toggle button in the upper left corner).

ps. 'mon' isn't marked 'protected' at this moment and is missing documentation.

yes i do know about the "properties and methods that are only used for UXes and plugins" ;)

i had the mon documentation in mind when i posted that. :)

[Ptigrouick]

Thanks a lot for your plugin.
It works when I display a static message with cellmouseenter event. But I tried to display data from the cell and I didn't succeed. I used the same code which works with cellclick event, but I have an error. I'm quite new to ExtJS and I didn't understand how to use those cellmouseenter params ('cell' + name, this, row, cell, e, cellEl).
Could you help me with a small example of cellmouseenter usage ?
Thanks for your help.

[Ptigrouick]

OK finally succeeded to do what I need. Here is an extract of my code in case it could help someone one day. :-)
I used cellmouseenter and cellmouseleave events.
When over a column called 'quicklook', I open a popup with data coming from a 'name' column of the same row.
Note : quicklook_open_popup function just open a new Ext.Window in qk_popup var


gridPanel = new Ext.grid.GridPanel({
......
,listeners: {
cellmouseenter: {
fn: function(grid, rowIndex, columnIndex, e) {
var fieldName = grid.getColumnModel().getColumnId(columnIndex); // Get field name
if (fieldName == 'quicklook') {
var record = grid.getStore().getAt(rowIndex); // Get the Record
var data = record.get('name');
quicklook_open_popup(data, e);
}
}
},
cellmouseleave: {
fn: function(grid, rowIndex, columnIndex, e) {
if(typeof(qk_popup) != "undefined"){
qk_popup.destroy();
}
}
}
}
}

[Animal]

Couldn't you just use an Ext.ToolTip with the delegate option?

[Ptigrouick]

Thanks for reply Animal !
Tried to use delegate option of Ext.Tooltip as you said, and I succeed to display my images inside Tooltip, but I didn't understand how to align the Tooltip in the middle of the page like I did with Ext.Window
The images are large and my grid is at the right part of my page, so the images are cut by the edge of the browser. As a relative newbie, I'm very confuse with positions of Tooltip (anchor, anchorOffset, anchorToTarget, defaultAlign).
How to align a tooltip in the middle of document.body ?

[Animal]

You might have to subclass ToolTip to make it center itself on display. You'd have to look at the code.

I think a config option for aligning center would be a good idea.