Get cell's data using GridPanel's Mouseover

I have a standard GridPanel with one column containing verbose text. I want to shorten the text and display the complete text in a mouse over. If each row of the grid has a unique ID specified in a JsonReader it should be quite simple. I'm having trouble figuring this out.

PHP Code:

---

grid.on('mouseover', function(e,t,a) {
    var row = this.getView().findRowIndex(t);
    var col = this.getView().findCellIndex(t);
} 


---

I found this snippet searching the forums but I'm not sure how I get a row's id or even a particular cell's actual data. I've read the GridPanel and GridView docs but nothing jumps out at me. I'm basically just looking to mouseover a cell of a Description column and get the ID from that same row. Not just the row id but the actual data contained in that ID cell.

It seems inefficient to mouseover the entire grid then use if statements to make sure you're over the right cell, is there a way to just mouseover a single cell? Like grid.element.on() or something like that? If so what is the proper way to reference that cell?

Also the arguments to the function passed to grid.on are a mystery to me. I assume e=event, t=target, what about a?

Thank you.

It's surprisingly efficient.

Code:

---

grid.on("mouseover", function(e, t) {
        var row;
        if((row = this.findRowIndex(t)) !== false){
                var record = this.store.getAt(row);
                var id = record.get('Id');
        }
}, grid);

---

Quote:

---

Originally Posted by Clever Cutter

Like grid.element.on() or something like that? If so what is the proper way to reference that cell?

Also the arguments to the function passed to grid.on are a mystery to me. I assume e=event, t=target, what about a?

Thank you.

---

When you say something.on it means to add a listener to something in this case.

For a nice tutorial about listeners see the Ext Event Handling link on this page
http://extjs.com/blog/2008/02/14/community-talk-feb-08/


grid.element.on isn't supported. If you look at the public properties in the API, there is no "element" property for a grid.

In case you don't know, to look something up in the api docs:

1. go here: http://extjs.com/deploy/dev/docs/
2. on the left tree panel, expand Ext
3. since you are looking for grid info, expand the grid folder
4. then click on GridPanel

At the top of the right it tells you what class this one extends, and what classes use this class as a base.

You asked about 'on', which is equivalent to 'addListener'. In the config subsection scroll down to "listeners" and expand it. There it has a link to "addListener" which explains more about listeners and has an example showing "on". You could also have gone to the public method subsection and found "on" listed.

You specifically asked about the 'mouseover' event. So looking at 'mouseover' in the public method section it has this:

HTML Code:

---

mouseover : ( Ext.EventObject e )
The raw mouseover event for the entire grid.
Listeners will be called with the following arguments:

    * e : Ext.EventObject

---

If I add the listener as described and inside it do something like:

Code:

---

console.log('Inside mouseover listener which has arguments =',arguments)

---

It shows 3 arguments in the console log. On the console you can see when the event gets fired and then you can click on the links for the arguments to inspect the DOM of each argument and see what's available with each one of those arguments.

Actually when you hover over the 2nd argument you'll see firebug highlight the html containers in the window.

The 3rd argument appears to be an empty object ("There are no properties to show for this object"). The blog forwarded mentions something about possibly sending custom parameters, but I didn't figure out how to do it.

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