Question

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

Answer 1

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

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

创建工具提示时传递类名称＆amp;显示工具提示的目标。

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

以下代码为每个网格行提供了一个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 */]              
       );
}

我猜你可以直接在网格的监听器中配置一个菜单对象，而不是一个提示对象。

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

2 个答案: