Results 1 to 7 of 7

Thread: grid cell mouseover event with rowIndex and colIndex

  1. #1
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    432

    Default grid cell mouseover event with rowIndex and colIndex

    How can I listen to cell mouseover events within a grid and capture the rowIndex and colIndex of the cell that is being mouseovered? Thanks!

    I did this in 3.4 prior...
    Code:
            grid.on('mouseover', function (e, t) {
                var me = this;
    
    
                var rowIndex = me.getView().findRowIndex(t);
                var cellIndex = me.getView().findCellIndex(t);
    
    
                if (rowIndex !== false && cellIndex !== false) {
                    var cell = me.getView().getCell(rowIndex, cellIndex);

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,247
    Answers
    758
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    432

    Default

    But those events are for row listeners and not cell listeners?

  4. #4
    Touch Premium Member
    Join Date
    Mar 2008
    Location
    Morgan Hill, CA
    Posts
    138

    Default

    Did you ever get a better response?

  5. #5
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    15

    Default

    +1 for needing a solution...

    Been searching the net for about an hour to try to solve this so far with no luck.

  6. #6

  7. #7
    Sencha User
    Join Date
    Feb 2011
    Location
    Trkiye/ANKARA
    Posts
    4

    Default

    var view = this;
    this.gridItemMouseOver = function(gridView, el, eOpts) {
    var cellIndex = el.cellIndex;
    if (el.cellIndex == undefined && el.offsetParent != undefined&& el.offsetParent.cellIndex != undefined)
    cellIndex = el.offsetParent.cellIndex;
    if (cellIndex > 0) {
    var hdEl = this.getView().getHeaderAtIndex(cellIndex);
    if (hdEl != undefined) {
    hdEl.addCls('x-column-header-over');
    setTimeout(function () {
    if (hdEl != undefined)
    hdEl.removeCls('x-column-header-over');
    }, 99999);
    }
    }
    };

    this.gridItemMouseOut= function(gridView, el, eOpts) {
    var cellIndex = el.cellIndex;
    if (el.cellIndex == undefined && el.offsetParent != undefined&& el.offsetParent.cellIndex != undefined)
    cellIndex = el.offsetParent.cellIndex;
    if (cellIndex > 0) {
    var hdEl = this.getView().getHeaderAtIndex(cellIndex);
    if (hdEl != undefined) {
    setTimeout(function () {
    if (hdEl != undefined)
    hdEl.removeCls('x-column-header-over');
    }, 500);
    }
    }
    };

    this.onGridRender= function () {
    this.mon(this.body, {
    cellclick: {fn: view.gridItemMouseOver, scope: this},
    celldblclick: {fn: view.gridItemMouseOver, scope: this},
    itemclick: {fn: view.gridItemMouseOver, scope: this},
    itemmouseenter: {fn: view.gridItemMouseOver, scope: this},
    itemmouseleave: {fn: view.gridItemMouseOut, scope: this},
    mouseover: {fn: view.gridItemMouseOver, scope: this},
    mouseout: {fn: view.gridItemMouseOut, scope: this},
    containerclick: {fn: view.gridItemMouseOver, scope: this},
    containerdblclick: {fn:view.gridItemMouseOver, scope: this},
    containermouseup: {fn: view.gridItemMouseOver, scope: this},
    containermouseover: {fn: view.gridItemMouseOver, scope: this},
    containermouseout: {fn: view.gridItemMouseOut, scope: this},
    beforeitemmouseenter: {fn: view.gridItemMouseOver, scope: this},
    beforeitemmouseout: {fn: view.gridItemMouseOut, scope: this}
    });
    };

    this.grid.on('afterrender', this.onGridRender, this.grid);


    //I wish you a good day
    I wish you a good day

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •