网格单元中的工具提示-ExtJs 6

Question

我正在使用以下代码来显示ExtJS 6中网格单元的工具提示

{
header: 'Name', 
cls: 'nameCls',
locked: true,
tdCls: 'nameTdCls',
dataIndex: 'name',
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
    metaData.tdAttr = 'data-qtip= "' + value + '" data-qclass="tipCls" data-qwidth=200';
    return value;
}}

当我运行该应用程序时，它不显示工具提示，并且在错误消息下方显示。

有想法吗？

在此先感谢大家。

此致Mahendra

Answer 1

您是否尝试过创建Ext.tip.ToolTip？您可以创建一个作为每个名称单元格的工具提示（使用delegate），并使用该单元格的值对其进行更新。设置一个网格渲染监听器来创建如下的工具提示：

render: function(grid) {
  var view = grid.getView();

  grid.tip = Ext.create('Ext.tip.ToolTip', {
    target: view.getId(),
    delegate: view.itemSelector + ' .nameTdCls',
    trackMouse: true,
    listeners: {
      beforeshow: function updateTipBody(tip) {
        var tipGridView = tip.target.component;
        var record = tipGridView.getRecord(tip.triggerElement);

        tip.update(record.get('name'));
      }
    }
  });
}

有关工作示例，请参见此Fiddle。