ExtJS -- 将工具提示添加到网格列标题答案

【问题标题】：ExtJS -- add tooltip to grid column headerExtJS -- 将工具提示添加到网格列标题
【发布时间】：2017-01-16 23:38:21
【问题描述】：

我正在使用 ExtJS 5。我有一个动态网格，这意味着列配置、存储字段、数据等都来自后端。

在使用列重新配置网格之前，我尝试使用 data-qtip 属性向标题添加工具提示，但这不起作用。

这是小提琴： https://fiddle.sencha.com/#fiddle/1fr8

片段：

var cols = data_1.metaData.columns;
for(var i=0;i<cols.length;i++){
   cols[i].header = "<font data-qtip='"+cols[i].header+"'>"+cols[i].header+"</font>";
}
grid.reconfigure(null, cols);       
store.getProxy().data =data_1.data;
store.loadPage(1)
grid.getView().refresh();

谢谢！

【问题讨论】：

标签： extjs

【解决方案1】：

请不要使事情过于复杂，gridcolumn 有一个 tooltip 配置应该可以工作。

  for(var i=0;i<cols.length;i++){
      cols[i].tooltip = cols[i].header;
  }

在你的情况下它不起作用，因为 QuickTipManager 必须首先在 Ext.onReady 中初始化：

Ext.onReady(function(){
    Ext.tip.QuickTipManager.init();
    var store = ...

请注意，gridcolumn 中的 header 配置已被弃用，取而代之的是 text 配置。

【讨论】：

【解决方案2】：

您还可以覆盖initRenderData 来设置此应用程序范围。例如始终使用列文本作为工具提示：

    /**
     * If a tooltip has not been set for a column header
     * then always default to the column name
     **/
    Ext.override(Ext.grid.column.Column, {
        initRenderData: function () {
    
            var me = this;
    
            if (Ext.isEmpty(me.tooltip)) {
                me.tooltip = me.text;
            }
    
            return me.callParent(arguments);
        }
    });

【讨论】：