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

Question

对溢出的网格单元格显示工具提示。

如果单元格的内容不适合其可见部分，我想显示包含该单元格全文的工具提示，如果不适合则不显示。我该怎么做？

// 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

像这样更改您的渲染器函数。确保 x-grid-cell-inner 是您的网格内部单元格 class 否则替换为您的 css class 名称。要在每次调整列大小后刷新，请使用 getView().refresh() 函数并从调整大小的侦听器中删除其他行。

 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

我的解决方案：

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

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

Extjs how to change tooltip on grid resize?

javascript

extjs

extjs4.2