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

Question

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

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

注意：所有这些代码有电网已经呈现后执行。

---

沙克蒂

Answer 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记录中配置一个自定义菜单，并将其添加到提示中。呼吁rowhover事件这个功能：

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

我想，而不是一个尖的对象，你也可以直接在网格的听众配置菜单对象。