1. #1
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default cellmouseenter and cellmouseleave etc for GridPanel

    cellmouseenter and cellmouseleave etc for GridPanel


    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


    Code:
    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

    Code:
        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.

  2. #2
    Sencha User MD's Avatar
    Join Date
    Mar 2007
    Posts
    178
    Vote Rating
    0
    MD is on a distinguished road

      0  

    Default


    Right on!

  3. #3
    Sencha User
    Join Date
    Apr 2008
    Location
    West Linton, Scotland
    Posts
    244
    Vote Rating
    0
    andycramb is on a distinguished road

      0  

    Default


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

    Code:
    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

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


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

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    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.

  6. #6
    Sencha User
    Join Date
    Apr 2008
    Location
    West Linton, Scotland
    Posts
    244
    Vote Rating
    0
    andycramb is on a distinguished road

      0  

    Default closing comma?

    closing comma?


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

    Code:
        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?

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    Yep. I never use the horror that is IE.

  8. #8
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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').

  9. #9
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    Quote Originally Posted by Condor View Post
    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.

  10. #10
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Quote Originally Posted by mystix View Post
    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.