ExtJS技术问询：网格Resize时修改工具提示及为溢出单元格显示提示

嘿，我来帮你搞定这两个ExtJS Grid的tooltip问题，结合你给出的思路，咱们把方案完善得更靠谱些：

你已经想到了在列的resize事件里控制tooltip显示的思路，核心痛点是获取内容的实际宽度。这里可以通过创建一个临时的隐藏DOM元素，模拟Grid单元格的样式来计算文本宽度，具体实现如下：

text: 'someHeaderName',
dataIndex: 'yourFieldName',
// 定义变量存储是否需要显示tooltip
showTooltip: false,
listeners: {
    resize(th, newWidth) {
        // 取当前列第一行的内容作为宽度参考（如果需要更精准可以遍历，但第一行足够判断列宽是否适配）
        const sampleText = th.getStore().getAt(0)?.get(th.dataIndex) || '';
        // 创建临时隐藏元素，匹配Grid单元格的字体样式
        const tempEl = Ext.DomHelper.createDom({
            tag: 'div',
            style: `
                position: absolute;
                visibility: hidden;
                white-space: nowrap;
                font-size: ${th.getView().getRowStyle().fontSize};
                font-family: ${th.getView().getRowStyle().fontFamily};
            `,
            html: sampleText
        });
        // 挂载到页面计算宽度后销毁
        Ext.getBody().appendChild(tempEl);
        const contentWidth = tempEl.offsetWidth;
        Ext.fly(tempEl).destroy();

        // 判断列宽是否小于内容宽度，更新tooltip开关
        this.showTooltip = newWidth <= contentWidth;
        // 刷新Grid视图，让renderer的设置生效
        th.up('gridpanel').getView().refresh();
    }
},
renderer: function(val, meta) {
    if (this.showTooltip) {
        // 用htmlEncode避免特殊字符导致的tooltip异常
        meta.tdAttr = `data-qtip="${Ext.util.Format.htmlEncode(val)}"`;
    } else {
        // 清空tooltip属性，防止之前的设置残留
        delete meta.tdAttr;
    }
    return val;
}

这个方案的逻辑是：在列调整大小时，通过临时元素计算内容的实际宽度，和新列宽对比后决定是否开启tooltip，最后刷新视图让renderer重新渲染单元格的tooltip属性。

你需求的核心是动态判断每个单元格是否溢出，而不是整列统一控制。上面的整列判断方案无法适配同一列不同行内容长度不同的情况，推荐用Ext.tip.ToolTip的beforeshow事件来动态判断，实现更精准的控制：

// 先创建你的Grid
const yourGrid = Ext.create('Ext.grid.Panel', {
    // 你的Grid配置项（store、columns等）
    columns: [
        { text: 'someHeaderName', dataIndex: 'yourFieldName' },
        // 其他列...
    ]
});

// 创建全局tooltip绑定到Grid视图
Ext.create('Ext.tip.ToolTip', {
    target: yourGrid.getView().el,
    delegate: '.x-grid-cell', // 委托给所有Grid单元格
    trackMouse: true,
    beforeshow: function(tip) {
        const cellEl = tip.triggerElement;
        // 判断单元格内容是否溢出：scrollWidth是内容实际宽度，clientWidth是单元格可见宽度
        const isContentOverflow = cellEl.scrollWidth > cellEl.clientWidth;
        
        if (!isContentOverflow) {
            return false; // 不溢出就阻止tooltip显示
        }

        // 获取当前单元格对应的记录和字段值
        const rowEl = cellEl.parentNode;
        const record = yourGrid.getView().getRecord(rowEl);
        const colIndex = yourGrid.getView().getCellIndex(cellEl);
        const fieldValue = record.get(yourGrid.getColumns()[colIndex].dataIndex);
        
        // 更新tooltip内容（同样用htmlEncode处理特殊字符）
        tip.update(Ext.util.Format.htmlEncode(fieldValue));
    }
});

// 处理列resize事件：调整列宽后刷新视图，确保tooltip判断是最新的
yourGrid.getColumns().forEach(column => {
    column.on('resize', () => {
        yourGrid.getView().refresh();
    });
});

这个方案的优势在于：

• 针对每个单元格单独判断是否溢出，适配同一列不同行内容长度差异
• 利用原生DOM的scrollWidth和clientWidth对比，判断逻辑准确
• 通过tooltip的beforeshow事件动态控制显示，无需在renderer里提前设置属性

内容的提问来源于stack exchange，提问作者Artem Bochkarev