Ext GWT (GXT) tooltip over a grid row

Question

I'm developing a custom tooltip using Ext GWT (GXT) for a project of mine, and this tooltip has to appear over Grid rows when they're selected. I can't use the default GXT tooltip or quicktip because I need be able to add Components (like buttons) to this tooltip.

The problem is that the GXT Grid component doesn't expose a event related to mousing over a row (although there's RowClick and RowMouseDown). I tried adding a listener to the Grid with the OnMouseOver and OnMouseOut events anyway, but it doesn't work as expected. It fires these events up whenever you mouse over any of the divs and spans that composes a row.

The only way I see to solve this is to subclass the GridView component and make each row become a Component itself, but that would be a lot of work and would probably impact performance as well. I can't help but think there's a better way to do this.

Could someone more experienced with GXT give me a light?

Answer 1

try this

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() (defined in com.extjs.gxt.ui.client.widget.Component with an empty body and overridden in com.extjs.gxt.ui.client.widget.grid.Grid) also receives Events with type Event.ONMOUSEOVER and Event.ONMOUSEOUT

The default implementation in the Grid class doesn't handle those events, so you may want to override this function in a subclass.

Additionally, at the end of onComponentEvent(), the Grid calls the function handleComponentEvent() of the GridView.

Answer 3

I found 2 ways to do that:

1.For specific column of the grid describe renderer, e.g.:

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

And your renderer function:

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

But this method will work only when your mouse pointer will be above that specific column.

2.For 'render' event of the grid apply/use this function:

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

I hope this will be helpful to you :)

Answer 4

I know this is old but there's no accepted answer and I think I found a better way:

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

I am using GWT 2.6 and GXT 3.1.0 and I managed to do this in this way .... Here the class RowSet is analogous to a 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);