EXTJS：在网格单元上显示自定义工具提示

当鼠标悬停在网格单元上时，如何在网格单元上显示自定义工具提示（如菜单）？它必须是动态的，因为每个单元格在工具提示中可以有不同的菜单项。我需要知道要侦听的事件，以及如何使用自定义菜单而不是典型的文本字符串或基于HTML模板的工具提示。

获取要添加工具提示的网格

var grid = Ext.componentQuery.query('grid[itemId=name_of_grid]')[0];

创建工具提示时，传递类名&要在其中显示工具提示的目标

grid.tip = Ext.Create('Ext.tip.Tooltip',{
title : 'title',
itemId : 'itemId',
target : grid.el,
delegate : 'x-grid-cell' // the cell class in which the tooltip has to be triggered
trackMouse : true,
renderTo : Ext.getBody()});

现在创建一个处理工具提示渲染的函数

var tipRenderer = function (e, t, grid){
e.stopEvent();
var tipbody = '<h5> helo </h5>';
grid.tip.update(tipbody);
grid.tip.show();
});

注意：所有这些代码都必须在网格渲染后执行

---

---

Shakti

以下代码为每个网格行提供一个tip对象以及相关记录

listeners: {
      render: function(grid) {
            grid.view.tip = Ext.create('Ext.tip.ToolTip', {
            target: grid.getEl(),
            // Each grid row causes its own seperate show and hide.
            delegate: ".x-grid-cell-last",
            items: [], // add items later based on the record
            // Render immediately so that tip.body can be referenced prior to the first show.
            listeners: {
                // Change content dynamically depending on which element triggered the show.
                beforeshow: function updateTipBody(tip) {
                        var rec = grid.view.getRecord(Ext.get(tip.triggerElement).findParentNode('.x-grid-row'));                        
                        grid.fireEvent('rowhover', tip, rec);
                        return true;
                }}
        });
     }}

然后在控制器类中，您可以侦听悬停事件，并向tip容器添加任何您喜欢的内容。在您的情况下，您可以从传递的

rec

记录中配置自定义菜单，并将其添加到提示中。在

rowhover

事件上调用此函数：

function onHover(tip, rec) {
    var me = this,
    tip.removeAll(true) // autodestroy
    tip.add(Ext.create('Ext.menu.Menu',{
        items:[/* your config here */]              
       );
}

我想您也可以在网格的侦听器中直接配置菜单对象，而不是tip对象

function onHover(tip, rec) {
    var me = this,
    tip.removeAll(true) // autodestroy
    tip.add(Ext.create('Ext.menu.Menu',{
        items:[/* your config here */]              
       );
}