ExtJS 5: spreadsheet drag select with shown cell tooltip

Question

I have a simple spreadsheet grid (example), and each cell has a tooltip... I'm using meta.tdAttr to add the tooltip for each cell. In Chrome, after the tooltip is shown, when I start dragging diagonally from the top left cell, the tooltip gets in the way and eventually has its text selected. I'm not sure if this is a bug or if it's just browser behavior (as IE and FF don't produce this issue, but do produce a little bit of lag in selecting). Either way, it's definitely a very annoying issue... it's not as prevalent in this example as it is in my actual application, but hopefully you get the idea.

Ideally, I'd listen to the mousedown event, and disable showing of tooltips, as mousedown would indicate a selection is about to occur. Then when mouseup is fired, I can enable showing of tooltips on hover.

I saw several examples from v4.2 and older, but they no longer apply to v5.0+. I started off using this example to make a cell tooltip, but it's a little difficult if I don't know the column/row index. This led me to this example, which uses the view's uievent to store the hovered row and column index. However, this doesn't appear to get updated on each cell hover in v4.2.1+. In v4.2.0, it worked fantastically.

Is there a way to create the tooltip on mouseover of the cell, and also have access to the row and column index of that cell?

Ext.application({
  name: 'Fiddle',

  launch: function() {
    Ext.create('Ext.data.Store', {
      storeId: 'simpsonsStore',
      fields: ['name', 'email', 'phone'],
      data: {
        'items': [{
          'name': 'Lisa',
          "email": "[email protected]",
          "phone": "555-111-1224"
        }, {
          'name': 'Bart',
          "email": "[email protected]",
          "phone": "555-222-1234"
        }, {
          'name': 'Homer',
          "email": "[email protected]",
          "phone": "555-222-1244"
        }, {
          'name': 'Marge',
          "email": "[email protected]",
          "phone": "555-222-1254"
        }, {
          'name': 'Lisa',
          "email": "[email protected]",
          "phone": "555-111-1224"
        }, {
          'name': 'Bart',
          "email": "[email protected]",
          "phone": "555-222-1234"
        }, {
          'name': 'Homer',
          "email": "[email protected]",
          "phone": "555-222-1244"
        }, {
          'name': 'Marge',
          "email": "[email protected]",
          "phone": "555-222-1254"
        }, {
          'name': 'Lisa',
          "email": "[email protected]",
          "phone": "555-111-1224"
        }, {
          'name': 'Bart',
          "email": "[email protected]",
          "phone": "555-222-1234"
        }, {
          'name': 'Homer',
          "email": "[email protected]",
          "phone": "555-222-1244"
        }, {
          'name': 'Marge',
          "email": "[email protected]",
          "phone": "555-222-1254"
        }, {
          'name': 'Lisa',
          "email": "[email protected]",
          "phone": "555-111-1224"
        }, {
          'name': 'Bart',
          "email": "[email protected]",
          "phone": "555-222-1234"
        }, {
          'name': 'Homer',
          "email": "[email protected]",
          "phone": "555-222-1244"
        }, {
          'name': 'Marge',
          "email": "[email protected]",
          "phone": "555-222-1254"
        }, {
          'name': 'Lisa',
          "email": "[email protected]",
          "phone": "555-111-1224"
        }, {
          'name': 'Bart',
          "email": "[email protected]",
          "phone": "555-222-1234"
        }, {
          'name': 'Homer',
          "email": "[email protected]",
          "phone": "555-222-1244"
        }, {
          'name': 'Marge',
          "email": "[email protected]",
          "phone": "555-222-1254"
        }]
      },
      proxy: {
        type: 'memory',
        reader: {
          type: 'json',
          rootProperty: 'items'
        }
      }
    });

    function columnRenderer(value, meta) {
      meta.tdAttr = 'data-qtip="This is<br />some really<br />long tooltip, so I hope you do not mind reading it"';
      return value;
    }

    Ext.create('Ext.grid.Panel', {
      title: 'Simpsons',
      store: Ext.data.StoreManager.lookup('simpsonsStore'),
      columns: [{
        text: 'Name',
        dataIndex: 'name',
        renderer: columnRenderer
      }, {
        text: 'Email',
        dataIndex: 'email',
        flex: 1,
        renderer: columnRenderer
      }, {
        text: 'Phone',
        dataIndex: 'phone',
        renderer: columnRenderer
      }],
      selModel: {
        type: 'spreadsheet'
      },
      height: 800,
      width: 800,
      renderTo: Ext.getBody()
    });
  }
});

Lucian Depold Lucian Depold · Accepted Answer · 2015-09-09T20:48:36

I took your fiddle and tuned it a little regarding the tooltip. The selection of the tooltip text should be gone.

https://fiddle.sencha.com/#fiddle/tkc

var view = grid.getView();

var tip = Ext.create('Ext.tip.ToolTip', {
     target: view.el,

    delegate:'td.x-grid-cell',// important for tooltip to be shown on each cell

    trackMouse: true,

    renderTo: Ext.getBody(),
    listeners: {
        // Change content dynamically depending on which element triggered the show.
        beforeshow: function updateTipBody(tip) {

            //console.log(view.getRecord(tip.triggerElement));
            var cellDOMRef = tip.triggerElement;
            var rowRef = view.getRecord(tip.triggerElement);
            var rowData = rowRef.data;

            var cellValue = cellDOMRef.firstElementChild.innerHTML;

            console.log(cellDOMRef,rowRef,rowData);
            tip.update('Tooltip '+cellValue);
        }
    }
});

The main thing i did here is creating a Ext tooltip and hook it onto every cell of your spreadsheet grid. You will get a reference to the row once the tooltip is shown and also to the DOM of the cell with which you can access the cell content/value, like i did with the cellValue variable in the beforeshow function. Hope this solves your problem.

EDIT:

To be able to get the column and row index, you could use the renderer you applied before and hide the information for each cell using the tdAttr. It's not the best way, but it works.

function columnRenderer(value, meta) {

    meta.tdAttr = 'columnIndex="'+meta.columnIndex+'" rowIndex="'+meta.rowIndex+'"';
    return value;
}

The fiddle from before should be updated.

ExtJS 5: spreadsheet drag select with shown cell tooltip

1 Answers