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是您的网格内部单元格类，否则请替换为您的CSS类名。要在每次调整列大小后刷新，请使用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如何更改网格调整大小的工具提示？

2 个答案: