Extjs如何更改网格调整大小的工具提示？

Question

Show tooltip to overflowed grid cell.

If the content of the cell do not fit in its visible part, I want to show tooltip with the full text of this cell and if its not don't show it. Any ideas how can I do it ?

// think about smth like this
// but don't know how to get content width

text: 'someHeaderName',
listeners: {
    resize( th, newWidth, height, oldWidth, oldHeight, eOpts ) {
        if (newWidth <= contentWidth) {
            this.showTooltip = true;
            th.up('panel').getView().refresh();
        }
    }
},
renderer: function(val, meta, rec, rowIndex, colIndex, store, view) {
    if (this.showTooltip) {
        meta.tdAttr = 'data-qtip="' + val + '"';
    }
    return val;
}

Answer 1

Change your renderer function like this. Make sure x-grid-cell-inner is your grid inner cell class otherwise replace with your css class name. To refresh after every column resize use getView().refresh() function and remove otherlines from your resize listeners.

 listeners: {
  resize( th, newWidth, height, oldWidth, oldHeight, eOpts ) {
                th.up('panel').getView().refresh();
           }
 },
 renderer: function(val, meta, rec, rowIndex, colIndex, store, view) {
    var colWidth = this.getColumns()[colIndex].width;
    var innercellclassEl = document.getElementsByClassName('x-grid-cell-inner ');
    var contentWidth = Ext.util.TextMetrics.measure(innercellclassEl,val).width;
    if ( colWidth < contentWidth) {
      meta.tdAttr = 'data-qtip="' + val + '"';
    }
    return val;
 }

Answer 2

My solution:

this.tip = Ext.create('Ext.tip.ToolTip', {
    target: Ext.getBody(),
    delegate: '.x-grid-cell',
    trackMouse: true,
    listeners: {
        beforeshow: function(tip) {
            var cell = tip.triggerElement;
            var el = cell.children[0];

            if (el.offsetWidth >= el.scrollWidth || cell.getAttribute('data-qtip')) {
                return false;
            }

            tip.update(el.innerText);
        }
    }
});