如何在Ext Js的Combobox组件本身而非下拉项上添加Tooltip

核心思路 #

• EXTJS禁用状态的组件默认会阻止鼠标事件触发，因此需要将Tooltip绑定到Combobox的外层容器元素，而非组件输入框本身
• Tooltip渲染时动态读取Combobox的store数据，遍历生成选项列表，匹配当前选中值后添加加粗样式

完整实现代码 #

Ext.create('Ext.form.ComboBox', {
    fieldLabel: '测试下拉框',
    store: Ext.create('Ext.data.Store', {
        fields: ['value', 'text'],
        data: [
            {value: '1', text: '选项1'},
            {value: '2', text: '选项2'},
            {value: '3', text: '选项3'},
            {value: '4', text: '选项4'}
        ]
    }),
    queryMode: 'local',
    valueField: 'value',
    displayField: 'text',
    value: '2', // 默认选中值
    disabled: true, // 初始为禁用状态
    renderTo: Ext.getBody(),
    listeners: {
        afterrender: function(combo) {
            // 绑定Tooltip到组件的外层根元素
            Ext.create('Ext.tip.ToolTip', {
                target: combo.getEl(),
                delegate: '.x-form-item-body', // 指定触发Tooltip的子元素，绕过禁用输入框的事件拦截
                showDelay: 300,
                dismissDelay: 0, // 可按需调整自动关闭时长，设为0表示需手动关闭
                trackMouse: false,
                // 动态生成Tooltip内容
                renderer: function(tip) {
                    const selectedValue = combo.getValue();
                    const optionList = [];
                    // 遍历store所有选项
                    combo.getStore().each(function(record) {
                        const text = record.get(combo.displayField);
                        const value = record.get(combo.valueField);
                        // 匹配当前选中项则加粗显示
                        if (value === selectedValue) {
                            optionList.push(`<li><strong>${text}</strong></li>`);
                        } else {
                            optionList.push(`<li>${text}</li>`);
                        }
                    });
                    return `<ul style="margin: 6px 0; padding-left: 22px; line-height: 1.6;">${optionList.join('')}</ul>`;
                }
            });

            // 兼容低版本EXTJS禁用元素事件拦截问题，强制开启容器的鼠标事件响应
            combo.getEl().down('.x-form-item-body').setStyle('pointer-events', 'auto');
        }
    }
});

注意事项 #

• 如果Combobox的store数据会动态更新、或者禁用状态会动态切换，需要在对应变更逻辑中调用Tooltip实例的update()方法刷新内容
• 可给Tooltip添加cls自定义类名，统一管理选项列表的样式，无需写在内联样式中

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