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。

Answer 2

感谢Robert Klein Kromhof！

网格列：

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

Answer 3

创建独立功能并在需要时调用。

＆＃13;

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

＆＃13;

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

3 个答案: