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

【问题标题】：EXTJS: Displaying Custom Tooltips Over Grid CellsEXTJS：在网格单元格上显示自定义工具提示
【发布时间】：2013-03-13 23:08:58
【问题描述】：

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

【问题讨论】：

标签： extjs menu tooltip

【解决方案1】：

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

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

现在，在鼠标悬停事件上提出提示。

grid.getEl().on('mouseover', function(e,t,a){
    tipRenderer(e,t,grid);
}, null, {delegate:targetClass});

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

沙克蒂

【讨论】：

【解决方案2】：

以下代码为每个网格行提供了一个提示对象以及关联的记录。

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

然后在您的控制器类中，您可以监听悬停事件并将您喜欢的任何内容添加到提示容器中。在您的情况下，您可以从传递的 rec 记录中配置自定义菜单并将其添加到提示中。在rowhoverevent 上调用此函数：

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

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

【讨论】：