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/showthrea...560#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!

[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

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.