extjs - 网格单元格中的工具提示 - 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;
}}

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

有什么想法吗？？

提前谢谢各位。

问候， 马亨德拉

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 .