Ext GWT (GXT) tooltip over a grid row

Eduardo Palma picture Eduardo Palma · Apr 19, 2011 · Viewed 9k times · Source

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

imsearcher picture imsearcher · Jun 15, 2011

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

            }
});