网格行上的 Ext GWT (GXT) 工具提示

Question

我正在为我的一个项目使用 Ext GWT (GXT) 开发一个自定义工具提示，并且当选择网格行时，此工具提示必须显示在网格行上。 我无法使用默认的 GXT 工具提示或快速提示，因为我需要能够向此工具提示添加组件（如按钮）。

问题是 GXT Grid 组件没有公开与鼠标悬停在行上相关的事件（尽管有 RowClick 和 RowMouseDown）。 无论如何，我尝试使用 OnMouseOver 和 OnMouseOut 事件向网格添加侦听器，但它无法按预期工作。每当它触发这些事件 将鼠标悬停在组成一行的任何 div 和 span 上。

我认为解决这个问题的唯一方法是子类化 GridView 组件并使每一行本身成为一个组件， 但这会是一项繁重的工作，并且可能还会影响性能。我忍不住想有更好的方法来做到这一点。

有 GXT 经验丰富的人可以给我指点迷津吗？

Answer 1

试试这个

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

            }
});

Answer 2

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

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

另外，在onComponentEvent()结束时，Grid调用GridView的handleComponentEvent()函数。

Answer 3

我发现有两种方法可以做到这一点：

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

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

和您的渲染器功能：

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

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

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

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

我希望这对您有帮助:)

Answer 4

我知道这已经过时了，但没有公认的答案，我想我找到了更好的方法：

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

Answer 5

我正在使用 GWT 2.6 和 GXT 3.1.0，我设法以这种方式做到这一点......
这里的 RowSet 类类似于 Map

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