网格行上的Ext GWT（GXT）工具提示

我正在为我的一个项目使用extgwt（GXT）开发一个自定义工具提示，当网格行被选中时，该工具提示必须显示在网格行上。 我无法使用默认的GXT工具提示或quicktip，因为我需要能够将组件（如按钮）添加到此工具提示

问题是GXT网格组件没有公开与在行上鼠标移动相关的事件（尽管有RowClick和RowMouseDown）。 不管怎样，我尝试使用OnMouseOver和OnMouseOut事件向网格中添加一个侦听器，但它并没有按预期工作。无论何时，它都会触发这些事件 将鼠标悬停在构成一行的任何div和span上

解决这个问题的唯一方法是对GridView组件进行子类化，并使每一行本身成为一个组件， 但这将是一个很大的工作，可能会影响性能以及。我忍不住想有更好的办法

GXT经验丰富的人能给我点启发吗？

onComponentEvent（）（在com.extjs.GXT.ui.client.widget.Component中定义，主体为空，在com.extjs.GXT.ui.client.widget.grid.grid中覆盖）也接收类型为Event.ONMOUSEOVER和Event.ONMOUSEOUT的事件

Grid类中的默认实现不处理这些事件，因此您可能希望在子类中重写此函数

---

此外，在onComponentEvent（）的末尾，网格调用GridView的函数handleComponentEvent（）。

我找到了两种方法：

1.对于网格的特定列，请描述渲染器，例如：

{
    width: 200,
    dataIndex : 'invoice',
    renderer:addTooltip
}

以及渲染器功能：

function addTooltip(value, metadata){
    metadata.attr = 'ext:qtip="' + value + '"';
    return value;
}

var myGrid = grid;

myGrid.on('render', function() {
    myGrid.tip = new Ext.ToolTip({
        view: myGrid.getView(),
        target: myGrid.getView().mainBody,
        delegate: '.x-grid3-row',
        trackMouse: true,
        renderTo: document.body,
        listeners: {
            beforeshow: function updateTipBody(tip) {
                tip.body.dom.innerHTML = "Over row " + tip.view.findRowIndex(tip.triggerElement);
            }
        }
    });
});

但只有当鼠标指针位于特定列上方时，此方法才有效

2.对于网格的“渲染”事件，应用/使用此功能：

function addTooltip(value, metadata){
    metadata.attr = 'ext:qtip="' + value + '"';
    return value;
}

var myGrid = grid;

myGrid.on('render', function() {
    myGrid.tip = new Ext.ToolTip({
        view: myGrid.getView(),
        target: myGrid.getView().mainBody,
        delegate: '.x-grid3-row',
        trackMouse: true,
        renderTo: document.body,
        listeners: {
            beforeshow: function updateTipBody(tip) {
                tip.body.dom.innerHTML = "Over row " + tip.view.findRowIndex(tip.triggerElement);
            }
        }
    });
});

我希望这将对您有所帮助：）

试试这个

QuickTip quickTip = new QuickTip(grid);

grid.addListener(Events.OnMouseOver, new Listener<GridEvent<BeanModel>>(){

            @Override
            public void handleEvent(GridEvent<BeanModel> ge) {
                com.google.gwt.dom.client.Element el=  grid.getView().getCell(ge.getRowIndex(),ge.getColIndex());
                String html = "<span qtip='" + el.getFirstChildElement().getInnerText() + "'>" + el.getFirstChildElement().getInnerText()  + "</span>";     
                el.getFirstChildElement().setInnerHTML(html);

            }
});

QuickTip-QuickTip=新的QuickTip（网格）；
addListener（Events.OnMouseOver，newlistener（））{
@凌驾
公共无效handleEvent（GridEvent ge）{
com.google.gwt.dom.client.Element el=grid.getView（）.getCell（ge.getRowIndex（），ge.getColIndex（））；
字符串html=“”+el.getFirstChildElement（）.getInnerText（）+”；
el.getFirstChildElement（）.setInnerHTML（html）；
}
});

我知道这很古老，但没有公认的答案，我想我找到了一个更好的方法：

grid.addListener(Events.OnMouseOver, new Listener<GridEvent<Model>>() {
            @Override
            public void handleEvent(GridEvent<Model> ge) {
                if (grid.getToolTip() != null) {
                    grid.getToolTip().hide();
                }
                ModelData model = ge.getModel();
                if (model != null) {
                    Object someValue = model.get("someProperty");
                    String label = someValue.toString();
                    grid.setToolTip(label);
                }
                if (grid.getToolTip() != null) {
                    grid.getToolTip().show();
                }
            }
        });

grid.addListener（Events.OnMouseOver，newlistener（））{
@凌驾
公共无效handleEvent（GridEvent ge）{
if（grid.getToolTip（）！=null）{
grid.getToolTip（）.hide（）；
}
modeldatamodel=ge.getModel（）；
如果（型号！=null）{
objectsomevalue=model.get（“someProperty”）；
String label=someValue.toString（）；
设置工具提示（标签）；
}
if（grid.getToolTip（）！=null）{
grid.getToolTip（）.show（）；
}
}
});

我正在使用GWT 2.6和GXT 3.1.0，我通过这种方式做到了这一点。。。。 在这里，类行集类似于映射

        GridView<RowSet> view = new GridView<RowSet>() {
        private Element cell;

        @Override
        protected void handleComponentEvent(Event event) {
            switch (event.getTypeInt()) {
            case Event.ONMOUSEMOVE:
                cell = Element.is(event.getEventTarget()) ? findCell((Element) event.getEventTarget().cast())
                        : null;
                break;
            }
            super.handleComponentEvent(event);
        }

        @Override
        protected void onRowOut(Element row) {
            grid.hideToolTip();
            grid.setToolTipConfig(null);
            super.onRowOut(row);
        }

        @Override
        protected void onRowOver(final Element row) {
            super.onRowOver(row);
            grid.hideToolTip();
            grid.setToolTipConfig(null);

            ToolTipConfig config = new ToolTipConfig();
            int rowIndex = grid.getView().findRowIndex(row);
            // Through "rowIndex" you can get the Row like this : 
            // grid.getStore().get(rowIndex)
            config.setBodyHtml("Your tool tip text here");
            config.setTitleHtml("Tool Tip Title");
            config.setCloseable(true);
            grid.setToolTipConfig(config);

            int absoluteRight = (cell != null) ? cell.getAbsoluteRight() : row.getAbsoluteRight();
            int absoluteTop = (cell != null) ? cell.getAbsoluteTop() : row.getAbsoluteTop();
            Point point = new Point(absoluteRight, absoluteTop);
            grid.getToolTip().showAt(point);
        }
    };
    view.setAutoFill(true);
    grid.setView(view);

GridView视图=新建GridView（）{
私有单元；
@凌驾
受保护的无效句柄组件事件（事件）{
开关（event.getTypeInt（））{
case Event.ONMOUSEMOVE：
cell=Element.is（event.getEventTarget（））？findCell（（Element）event.getEventTarget（）.cast（））
：null；
打破
}
超级手柄组件事件（事件）；
}
@凌驾
受保护的void onRowOut（元素行）{
grid.hideToolTip（）；
grid.setToolTipConfig（空）；
超排（row）；
}
@凌驾
RowOver上受保护的空（最终元素行）{
超级大排位赛（世界排位赛）；
grid.hideToolTip（）；
grid.setToolTipConfig（空）；
ToolTipConfig config=新的ToolTipConfig（）；
int rowIndex=grid.getView（）.findRowIndex（行）；
//通过“rowIndex”可以得到如下行：
//grid.getStore（）.get（行索引）
config.setBodyHtml（“此处为您的工具提示文本”）；
config.setTitleHtml（“工具提示标题”）；
config.setCloseable（true）；
grid.setToolTipConfig（配置）；
int absoluteRight=（单元格！=null）？cell.getAbsoluteRight（）：row.getAbsoluteRight（）；
int absoluteTop=（cell！=null）？cell.getAbsoluteTop（）：row.getAbsoluteTop（）；
点=新点（绝对右、绝对顶）；
grid.getToolTip（）.showAt（点）；
}
};
view.setAutoFill（true）；
grid.setView（视图）；

btw，我知道我的解决方案与侦听器无关，但效果是一样的。onComponentEvent将一些（不是全部）事件委托给其他onXyz（）-方法，这些方法反过来将事件激发给侦听器。imho，覆盖onXyz函数甚至比添加侦听器快一点（但我从未真正测量过）