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 */]    
     ); 
} 

我想，而不是一個尖的對象，你也可以直接在網格的聽衆配置菜單對象。