Ext JS Premium Member
Image with Detailed Tooltip using Cells - how?
So in my grid I have a couple of columns that show an icon which is pretty much a static icon (it is either shown or not depending on a property of the model - a few columns have multiple icons... no worries)
In GXT 2.x I did this with a custom widget which extends BoxComponent. The tooltip was set from a Template.
Now in GWT 2.4/2.5 and GXT 3.0.0b + we want to preferably use the Cell models.
One thought I had would be to have a custom Cell use something like the GWT ImageCell or ImageCellResource to quickly show the icon. I would override the onBrowserEvent to register a listener on mouse over/mouse out to attempt to add/show the tooltip div generated preferably using a template. The standard HTML tooltip (set via "title") on a <img/> tag does not support HTML markup so I am not able to get the styles and formating I want.
My concern here is the positioning and invokation of the tooltip will need to be managed within my cell code - I was hoping someone would have a better suggestion?
I suppose the other approach could be to add mouse movements listeners to the grid... ie. the cell itself is a dum image. The grid is what is tracking the movement and when over a cell that has "data" show the detailed information as a popup.
The main disadvantage here would be the need to calculate whether or not I am moving over a cell or not that needs to display a tooltip (afterall this is only ~ 75px (3 columns) out of ~ 1000px wide grid (there are optimizations that could be made - like keeping track of the column start and finish locations to know you are in the column "zone")