如何为Grid的Flag列配置Tooltip？解决显示规则与隐藏时机问题

嘿，这三个需求都不难实现，我直接给你修改好的代码，再拆解下每个点的改动逻辑：

修改后的完整代码 #

// 先定义Flag列的dataIndex（请替换成你实际项目中Flag列对应的dataIndex值）
const flagColumnDataIndex = 'flag';

grid.tip = Ext.create('Ext.tip.ToolTip', {
    target: view.el,
    // 1. 仅监听Flag列的单元格
    delegate: `.x-grid-cell[data-index="${flagColumnDataIndex}"]`,
    // 3. 关闭鼠标跟踪，改为手动控制显示隐藏
    trackMouse: false,
    // 关闭自动隐藏，由鼠标事件手动触发
    autoHide: false,
    listeners: {
        beforeshow: function(tip) {
            const record = grid.getStore().getAt(grid.recordIndex);
            const header = grid.headerCt.getGridColumns()[grid.cellIndex];
            const cellValue = record.get(header.dataIndex);
            
            // 2. 单元格无值时，阻止Tooltip显示
            if (Ext.isEmpty(cellValue)) {
                return false;
            }
            
            tip.update(cellValue);
        }
    }
});

// 3. 手动绑定单元格的鼠标事件，控制Tooltip的显示与隐藏
view.on({
    cellmouseover: function(view, td, cellIndex, record, tr, rowIndex, e) {
        const header = grid.headerCt.getGridColumns()[cellIndex];
        // 双重校验：必须是Flag列且单元格有值
        if (header.dataIndex === flagColumnDataIndex && !Ext.isEmpty(record.get(header.dataIndex))) {
            grid.cellIndex = cellIndex;
            grid.recordIndex = rowIndex;
            grid.tip.showAt(e.getXY());
        }
    },
    cellmouseout: function() {
        grid.tip.hide();
    }
});

每个需求的实现细节 #

• 仅Flag列显示Tooltip：
  我把Tooltip的delegate属性改成了只匹配data-index为Flag列对应值的单元格，从源头限制触发范围。同时在鼠标移入事件里再加了一层校验，确保只有目标列的单元格才会触发Tooltip。

• 无值的单元格不显示Tooltip：
  在beforeshow回调里先获取单元格对应的数据值，用Ext.isEmpty()判断是否为空，为空就返回false直接阻止Tooltip弹出。另外在鼠标移入事件里也加了值非空的判断，避免无效的触发动作。

• Tooltip仅在鼠标移出单元格时消失：
  原来的trackMouse: true会让Tooltip跟着鼠标移动，鼠标离开单元格就自动消失，所以我把它改成false并关闭autoHide，转而通过手动绑定cellmouseover和cellmouseout事件来控制：鼠标移到符合条件的单元格时显示Tooltip，移出时立刻隐藏，完全匹配你要的效果。

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