ExtJS 4.1.3中无法获取qtip内SVG元素ID进行动态修改的问题

核心原因 #

qtip的DOM元素是延迟渲染的——只有当鼠标hover触发tooltip显示时，它才会被插入到页面DOM中。所以你提前通过document.getElementById()、Ext.getCmp()等方法查找，自然会返回null或undefined；开发者工具能看到元素，是因为你已经hover触发过tooltip渲染了。

可行解决方案 #

方案1：渲染qtip时直接生成动态SVG

在列的renderer函数中，根据当前单元格的值直接拼接动态SVG字符串，一次性生成符合需求的tooltip内容，避免后续修改。

columns: [{
    text: '目标列',
    dataIndex: 'targetValue',
    renderer: function(value, metaData) {
        // 根据单元格值动态生成SVG内容
        const dynamicWidth = value * 15;
        const svgStr = `<svg width="120" height="60">
            <rect x="0" y="0" width="${dynamicWidth}" height="60" fill="#FF9800" />
            <text x="10" y="35" fill="#fff">${value}</text>
        </svg>`;
        
        // 将SVG设置为qtip内容
        metaData.tdAttr = `data-qtip="${svgStr.replace(/"/g, '&quot;')}"`;
        return value;
    }
}]

注意：如果SVG字符串包含双引号，需要转义为"，避免破坏data-qtip的属性结构。

方案2：监听tooltip的beforeshow事件修改SVG

利用tooltip显示前的事件钩子，此时tooltip的DOM已创建完成，可直接获取并修改SVG元素。

// 初始化全局QuickTip
Ext.tip.QuickTipManager.init();
const quickTip = Ext.tip.QuickTipManager.getQuickTip();

// 监听beforeshow事件
quickTip.on('beforeshow', function(tip) {
    // 获取触发tooltip的单元格
    const cellEl = tip.triggerElement;
    // 获取单元格对应的记录数据
    const record = grid.getView().getRecord(cellEl);
    const cellValue = record.get('targetValue');
    
    // 获取tooltip内的SVG元素
    const svgDom = tip.getEl().dom.querySelector('svg');
    if (svgDom) {
        // 动态修改SVG内容，例如修改矩形宽度
        const rect = svgDom.querySelector('rect');
        rect.setAttribute('width', cellValue * 15);
    }
});

注：grid需替换为你的网格面板实例；若SVG有唯一ID，也可用document.getElementById()查找。

方案3：自定义Tooltip组件完全控制渲染

如果默认qtip不够灵活，可以自定义Tooltip组件，直接绑定网格单元格，动态生成SVG内容。

Ext.define('CellSVGTooltip', {
    extend: 'Ext.tip.ToolTip',
    target: grid.getView().el, // 绑定网格视图元素
    delegate: '.x-grid-cell', // 监听单元格触发
    trackMouse: true,
    renderTo: Ext.getBody(),
    
    listeners: {
        beforeshow: function(tip) {
            const record = grid.getView().getRecord(tip.triggerElement);
            const value = record.get('targetValue');
            
            // 动态生成SVG并更新tooltip内容
            const svgContent = `<svg width="120" height="60">
                <circle cx="${value * 2}" cy="30" r="20" fill="#4CAF50" />
            </svg>`;
            tip.update(svgContent);
        }
    }
});

// 实例化自定义Tooltip
new CellSVGTooltip();

注意事项 #

• 避免在网格初始化、DOMContentLoaded或Ext.onReady中直接查找SVG元素，此时tooltip未渲染
• 若使用多个单元格的tooltip，SVG避免用重复ID，改用class选择器更安全
• ExtJS 4.1.3的API与高版本存在差异，操作DOM时优先使用ExtJS的元素方法（如getEl().down()），兼容性更好

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