Extjs如何仅当fieldlabel为‘Periods’时为fieldtype标签添加tooltip

可以直接使用if else语句实现该需求，只需要将判断逻辑放在组件渲染完成的时机执行，避免获取不到对应DOM元素的问题。

实现思路 #

• 依赖Extjs组件的afterrender事件，确保表单字段的DOM完全渲染后再执行逻辑，此时才能正确获取fieldLabel的文本和对应的DOM节点
• 用if else判断fieldLabel的文本是否匹配Periods，匹配则给fieldLabel绑定tooltip
• 提前初始化全局QuickTipManager，保证tooltip功能可用

代码示例 #

基础实现（表单初始化阶段配置） #

首先全局初始化Tooltip管理器，整站只需要执行一次：

Ext.tip.QuickTipManager.init();

表单字段配置示例：

Ext.create('Ext.form.Panel', {
    title: '示例表单',
    width: 400,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        name: 'fieldtype',
        fieldLabel: 'Periods',
        listeners: {
            afterrender: function (field) {
                // 去除首尾空格避免匹配误差
                const labelContent = field.getFieldLabel().trim();
                if (labelContent === 'Periods') {
                    // 给fieldLabel元素绑定tooltip
                    Ext.tip.QuickTipManager.register({
                        target: field.getLabelEl(),
                        text: '自定义的tooltip提示内容'
                    });
                }
            }
        }
    }]
});

动态场景实现（已渲染组件追加逻辑） #

如果是已经渲染完成的页面，需要动态给符合条件的字段加tooltip，可直接执行以下逻辑：

// 查找name为fieldtype的字段实例
const targetField = Ext.ComponentQuery.query('field[name="fieldtype"]')[0];
if (targetField && targetField.rendered) {
    const labelContent = targetField.getFieldLabel().trim();
    if (labelContent === 'Periods') {
        Ext.tip.QuickTipManager.register({
            target: targetField.getLabelEl(),
            text: '自定义的tooltip提示内容'
        });
    }
}

注意事项 #

• 如果fieldLabel会动态修改，需要在修改label的逻辑执行完成后，重新运行上述判断绑定逻辑，保证tooltip的正确性
• 不要在组件初始化的配置阶段直接执行判断逻辑，此时组件还未渲染，无法获取到label对应的DOM节点，绑定会失效
• 不需要tooltip时可调用Ext.tip.QuickTipManager.unregister(target)方法解绑

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