如何通过代码为ExtJS Combobox动态添加Tooltip

我来帮你搞定这个给ComboBox加提示框的问题，先分析下你两种写法的问题，再给你可行的解决方案～

为什么你的两种写法都没生效？ #

1. 第一种写法（setTooltip）：

   • 你用了Ext.getCmp('datasources')，但你的ComboBox配置的是itemId: 'datasources'而非id: 'datasources'，Ext.getCmp是通过组件的id属性查找的，所以根本找不到目标组件，自然调用setTooltip没反应。
   • 退一步说，就算找到了组件，ComboBox是复合组件，直接调用setTooltip可能无法正确绑定到对应的交互元素（比如输入框或下拉箭头）。

2. 第二种写法（动态创建ToolTip）：

   • 你把target设为字符串'datasources'，但同样因为组件没有设置id，Ext找不到对应的DOM元素，所以会报错。另外如果onStartReport触发时组件还没完全渲染完成，也会导致绑定失败。

正确的解决方案 #

方案1：组件初始化时直接配置Tooltip（最推荐）

这是最简单的方式，直接在ComboBox的配置里添加tooltip属性，ExtJS会自动帮你绑定到正确的元素：

{
    xtype: 'combo',
    itemId: 'datasources',
    name: 'datasources',
    fieldLabel: 'Data sources',
    displayField: 'description',
    valueField: 'id',
    queryMode: 'local',
    value: 0,
    forceSelection: true,
    editable: false,
    tooltip: 'Information on datasource', // 直接添加这一行
    store: {
        data: [
            {id: 0, description: 'OnLine'},
            {id: 1, description: 'History'}
        ],
        fields: [
            {name: 'id', type: 'int'},
            {name: 'description', type: 'string'}
        ],
        autoLoad: true
    }
}

方案2：运行时动态添加Tooltip

如果必须在onStartReport这类事件里动态添加，需要正确获取组件并绑定到对应的DOM元素：

onStartReport: function (aButton) {
    // 通过itemId从按钮的父容器中查找目标ComboBox
    var combo = aButton.up().down('#datasources');
    
    if (combo) {
        // 创建ToolTip并绑定到ComboBox的根DOM元素
        Ext.create('Ext.tip.ToolTip', {
            target: combo.getEl(), 
            html: 'Information on datasource'
        });
        
        // 如果你想把Tooltip绑定到下拉箭头按钮，可以改成：
        // target: combo.triggerEl
    }
}

关键注意点 #

• 区分id和itemId：id是全局唯一标识，itemId是组件树内的局部标识，查找itemId的组件要用down('#itemId')或up('#itemId')，而非Ext.getCmp。
• 动态绑定Tooltip时，确保组件已经完成渲染，否则无法获取到有效的DOM元素。

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