Extjs 7.8.0 CheckboxModel表头复选框添加Tooltip实现咨询

你可以通过**全局重写Ext.selection.CheckboxModel**的方式，一次性为所有使用该选择模型的网格表头复选框添加Tooltip，无需为每个网格单独配置监听器。以下提供两种可行方案：

方案一：使用Ext官方Tooltip（样式统一，支持复杂配置） #

该方案利用Ext的Ext.tip.Tooltip组件，样式与框架保持一致，还支持自定义样式、延迟显示等高级配置：

Ext.define('MyApp.overrides.selection.CheckboxModel', {
    override: 'Ext.selection.CheckboxModel',

    // 可自定义的Tooltip文本，直接修改此处即可全局生效
    headerCheckboxTooltip: '点击选择/取消选择所有行',

    initComponent: function() {
        this.callParent(arguments);
        // 监听网格表头刷新事件，确保表头变动后Tooltip仍能正常绑定
        this.grid.on('headerrefresh', this.setupHeaderTooltip, this);
    },

    setupHeaderTooltip: function() {
        // 获取表头的复选框DOM元素
        var checkboxEl = this.grid.headerCt.getHeaderAtIndex(0).el.down('.x-grid-hd-checker');
        
        if (checkboxEl) {
            // 清理已存在的Tooltip，避免重复创建导致内存泄漏
            if (this.headerTooltip) {
                this.headerTooltip.destroy();
            }
            // 创建并绑定Tooltip
            this.headerTooltip = Ext.create('Ext.tip.Tooltip', {
                target: checkboxEl,
                html: this.headerCheckboxTooltip,
                trackMouse: true // 鼠标移动时跟随显示
            });
        }
    },

    // 组件销毁时清理Tooltip，释放内存
    destroy: function() {
        if (this.headerTooltip) {
            this.headerTooltip.destroy();
            this.headerTooltip = null;
        }
        this.callParent(arguments);
    }
});

方案二：使用原生HTML title属性（代码简洁，适合简单需求） #

如果只需要基础的Tooltip功能，可直接修改表头复选框的HTML代码，添加原生title属性：

Ext.define('MyApp.overrides.selection.CheckboxModel', {
    override: 'Ext.selection.CheckboxModel',

    headerCheckboxTooltip: '点击选择/取消选择所有行',

    renderHeader: function() {
        // 先调用父类方法获取默认的表头HTML
        var headerHtml = this.callParent(arguments);
        // 为复选框input元素插入title属性
        return headerHtml.replace('<input ', `<input title="${this.headerCheckboxTooltip}" `);
    }
});

使用说明 #

将上述任意一种override代码保存为独立文件（如CheckboxModel.js），在项目中引入该文件即可。所有使用CheckboxModel作为选择模型的网格，其表头复选框都会自动带上Tooltip，无需额外配置。

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