Results 1 to 4 of 4

Thread: Get cell's data using GridPanel's Mouseover

  1. #1
    Sencha Premium User Clever Cutter's Avatar
    Join Date
    Sep 2007
    Location
    San Diego, CA
    Posts
    41

    Default 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.

  2. #2
    Ext User para's Avatar
    Join Date
    Apr 2007
    Location
    Redmond, WA
    Posts
    918

    Default

    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);

  3. #3
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996

    Default

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

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

    Default Changing the background of Header information while on Grid Mouse

    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

Posting Permissions

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