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

【问题标题】：ToolTip in Grid cell - ExtJs 6网格单元格中的工具提示 - ExtJs 6
【发布时间】：2017-01-18 10:07:20
【问题描述】：

我正在使用下面的代码在 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;
}}

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

有什么想法吗？？

提前谢谢各位。

问候，马亨德拉

【问题讨论】：

似乎缺少工具提示类。你给Ext.QuickTips.init();打过电话吗？
@Tyr 不，我没有调用 Ext.QuickTips.init();我应该在哪里调用这个方法？
致电Ext.onReady(function(){ /*here*/ })
嗨@Vinod Gubala..我尝试了同样的方法，但仍然遇到同样的错误。

标签： extjs grid tooltip extjs6

【解决方案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。

【讨论】：

感谢您的回复。我忘记提及我正在使用锁定网格的一点。在我的网格中，最初的 3 列被锁定，remaning 被解锁。对于锁定的列，我使用了“locked: true”属性。当我在您的示例中使用相同的内容时，它会停止工作。知道为什么当我将一列添加为锁定时它不起作用。
检查更新的Fiddle。使用enableLocking 时，网格的行为会有所不同。 enableLocking 的 API 文档这样说：“锁定网格以特殊方式处理。此面板仅成为一个容器，将两者安排在 HBox 布局中。”。我稍微改变了这个例子，主要是将render 监听器移动到lockedViewConfig。看看吧。

【解决方案2】：

感谢罗伯特·克莱因·克罗姆霍夫！

网格列：

columns: [{..., tdCls: 'tip'}]

网格监听器：

render: function (grid) {
                var view = grid.getView();
                grid.tip = Ext.create('Ext.tip.ToolTip', {
                    target: view.getId(),
                    delegate: view.itemSelector + ' .tip',
                    trackMouse: true,
                    listeners: {
                        beforeshow: function (tip) {
                            var tipGridView = tip.target.component;
                            var record = tipGridView.getRecord(tip.triggerElement);
                            var colname = tipGridView.getHeaderCt().getHeaderAtIndex(tip.triggerElement.cellIndex).dataIndex;
                            tip.update(record.get(colname));
                        }
                    }
                });
            },
            destroy: function (view) {
                delete view.tip;
            }

【讨论】：

【解决方案3】：

创建独立函数并在需要时调用。

var grid = Ext.getCmp('your_grid_id');   // Enter your grid id
initToolTip(grid); // call function

initToolTip: function(grid) {
    var view = grid.view;

    // record the current cellIndex
    grid.mon(view, {
        uievent: function(type, view, cell, recordIndex, cellIndex, e) {
            grid.cellIndex = cellIndex;
            grid.recordIndex = recordIndex;
        }
    });

    grid.tip = Ext.create('Ext.tip.ToolTip', {
        target: view.el,
        delegate: '.x-grid-cell',
        trackMouse: true,
        renderTo: Ext.getBody(),
        listeners: {
            beforeshow: function updateTipBody(tip) {
                if (!Ext.isEmpty(grid.cellIndex) && grid.cellIndex !== -1) {
                    header = grid.headerCt.getGridColumns()[grid.cellIndex];
                    columnText = grid.getStore().getAt(grid.recordIndex).get(header.dataIndex);

                    tip.update(columnText);
                }
            }
        }
    });
}

【讨论】：