Question

我正在使用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();

谢谢！

Answer 1

请不要过于复杂，网格列的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 = ...

请注意，header gridcolumn中的text配置已被弃用，支持click()配置。

Answer 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);
        }
    });

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

2 个答案: