Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Value of a cell on mouseover

  1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    95

    Default Value of a cell on mouseover

    Hello,

    I have a grid with cellmodel and I want the value of the cell on mouseover.

    With click I get it:
    Code:
    cellclick: function(iView, iCellEl, iColIdx, iRecord, iRowEl, iRowIdx, iEvent) {
        var fieldName = iView.getGridColumns()[iColIdx].dataIndex;
        var cellvalue = iRecord.get(fieldName);
    }
    I don't want to fill it when I render the grid, but I need it on mouseover event?

    Tilo

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,392

    Default

    You can add a mouseover listener to the grid's body element (not component, element) but you will need to resolve what row and column you are in. getRecord on the grid view will get you part of the way.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Posts
    95

    Default

    I tryed this:
    Code:
    Ext.getCmp('gridD').view.addListener('mouseover', function(view) {
        console.log('1 grid-view-mouseover');
        console.log(view);
    });
    Ext.getCmp('gridD').getEl().addListener('mouseover', function(view) {
        console.log('2 grid-El-mouseover');
        console.log(view);
    });
    Ext.getCmp('gridD').view.getEl().addListener('mouseover', function(view) {
        console.log('3 grid-view-El-mouseover');
        console.log(view);
    });
    2 and 3 fire, 1 not. But in 2 and 3 there is no view.getRecord.
    Are there other function parameter to use. addListener('mouseover', function(view,...,...) Which are there else?

  4. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,392

    Default

    As I said, mouseover will only fire on the element so that's why the first doesn't fire. There are only a couple arguments, the event object and the node.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  5. #5
    Sencha User
    Join Date
    Jul 2011
    Posts
    95

    Default

    I got the data which I need on mouseover, thank you.
    In the column renderer I put the needed values in attributes of the node:
    Code:
    var fieldName = view.getGridColumns()[colIndex].dataIndex;
    var id = record.get('id');
    var company_id = record.get('company_id');
    metadata.tdAttr = 'data-qtip="' + "" + '" fieldName="' + fieldName + '" product_id="' + id + '" company_id="' + company_id + '"';
    and got it in mouseover:
    Code:
    Ext.getCmp('gridD').getEl().addListener('mouseover', function(event, node) {
        var fieldName = node.getAttribute('fieldName');
        var product_id = node.getAttribute('product_id');
        var company_id = node.getAttribute('company_id');
                
        console.log('fieldName: ' + fieldName + ', ' + 'product_id: ' + product_id + ', ' + 'company_id: ' + company_id);
        
        //update the tooltip of the cell
    });
    My next question:
    Now I want to use this values to get other values (from a second store) and I want to update the tooltip with these new values. How I can update the data-qtip so that it's shown directly on mouseover?

  6. #6
    Sencha User
    Join Date
    Jul 2011
    Posts
    95

    Default

    I've been too early pleased. The mouseover listener fires the wrong node. It fires the node where I come from but not the node where the mouse is currently.

  7. #7
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,199

    Default

    This one gives me a cellvalue,

    Code:
    gridpanel.on('itemmouseenter', function(comp, record, item, index, event, options) {
    
            var cell = Ext.get(event.getTarget()).down("div");
            if (cell) {
                console.log(cell.dom.innerHTML);
            }
        });
    maybe that selector can be made more simple to retrieve the dom value or the values you have set on the attributes

  8. #8
    Sencha User
    Join Date
    Jul 2011
    Posts
    95

    Default

    Thank you, its better because I have the record there and with your solution I can get the cell value.

    But for me its not the solution because I also need the fieldName to identify. To put the fieldName in the attributes gives the same wrong value like my solution before. Then I tryed to put the fieldName on renderer into the qtip (crazy I know) and get it with
    Code:
    var fieldName = event.getTarget().dataset.qtip;
    But that works sometimes and sometimes its undefined. So I cannot use it too and stay on the cellclick event and make my actions there.

  9. #9
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,199

    Default

    in this case a mouseover will also be triggered in some border region of the cell then it doesn't work (or you must use a good spath query the lookup the element) but it will eventually trigger on the inner cell.

    For that case you can check if the dataset prop is null

    Code:
    if(event.getTarget().dataset)
    {
      //code
    }

  10. #10
    Sencha User
    Join Date
    Jul 2011
    Posts
    95

    Default

    I checked the dataset and still often the qtip is undefined even I see the right value in the tooltip.

Page 1 of 2 12 LastLast

Posting Permissions

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