View Full Version : Show dynamic Grid on image mouse over

2 Mar 2012, 2:59 AM
I have a Grid with 5 columns. Each column can or can't have image depending upon the some condition or business.

My requirement is , I have to show another Gird in the tooltip. I have tried to use the following code.

grid.getView().on('itemclick', function(view) { view.tip = Ext.create('Ext.tip.ToolTip', { target: view.el, delegate: view.itemSelector, trackMouse: true, first show. renderTo: Ext.getBody(), listeners: { beforeshow: function updateTipBody(tip) { tip.update('Over company "' + view.getRecord(tip.triggerElement).get('company') + '"'); } } }).show();});
1] But here i have used "itemclick" , instated of this I want mouse over event.

Please suggest me how to do that?

2 Mar 2012, 11:16 AM
Grid's have a mouseover event. You can use getTarget on the event object to see if it is over a certain element.

21 Mar 2012, 1:22 AM
Hi Thanks for the reply.

Sorry for this late.

I didn't get you. I want to do exactly the same which is there in the image attached.

Here is my Column config.


id: 'userName',
width: 160,
text: 'User',
dataIndex: 'userName',
sortable: false,
groupable: false
id: 'projectAccess',
width: 160,
text: 'Project',
dataIndex: 'projectAccess',
renderer :function(value,record)
{ if(value=="Custom")
return value+"&nbsp;<img src='images/new/icon/custom.png'>";
else {
return value;
sortable: false,
groupable: false

Here is Screen shot of my Grid.
I am able to show the image in the Grid.
Now I want to show Grid on mouse over of ONLY image icon.
I am not getting where to write the code.
Please suggest me here.

21 Mar 2012, 9:57 PM
any suggestion ?

22 Mar 2012, 4:20 AM
Do a mouseover listener delegating to the <img> and show a tooltip with a grid inside

grid.mon(grid.body, {
scope : grid,
delegate : 'img',
mouseover : function(e, t) {}

The delegate is a CSS selector that targets elements. You may need to give your <img> a CSS class for better targeting and update the delegate. For instance, say you have this

<img src="...." class="grid-mouseover">

Then the delegate would be:

delegate : 'img.grid-mouseover'

22 Mar 2012, 5:02 AM
Thanks for the help..

I did something like this, and it works,

Grid.mon(Grid.body, {
scope : Grid,
delegate : 'img',
mouseover : function(e, t) {
var view=Grid.getView();

// want row index so that can get value from Store.

var rec=Grid.getStore().getAt(0);
var userId=rec.get('ProjectPeople_userId_columnId');
var toolTipGrid=CreateToolTipGrid(userId,componentId,'s');
view.tip = Ext.create('Ext.tip.ToolTip', {
target: view.el,
delegate: view.cellSelector,
trackMouse: true,
renderTo: Ext.getBody(),
listeners: {
beforeshow: function updateTipBody(tip) {

but it gaves me error. Also i want the rowIndex. so that I can get values from the Store.
I tried myself but didn't find any way for this.

also on mouse over i am getting 2 tooltips. Don't know why?

attached the screen shot

Can you please suggest what is wrong here?

ext-all-debug.js:5580 (http://localhost:9001/javascript/extjs/ext-all-debug.js?noCache=1331969429227)Uncaught TypeError: Cannot read property 'offsetWidth' of undefined

23 Mar 2012, 9:13 PM
Can you please suggest what is wrong here?

24 Mar 2012, 5:59 AM
Why are you inserting the grid in the beforeshow event? Why not just have it in the items? In fact, why are you creating a new tooltip and grid on the mouseover? You can reuse these things. You also shouldn't need to use renderTo.

25 Mar 2012, 8:27 PM
Hi ,
I have done as per the example given in the docs.

Also , this is my requirement that, I want to show Grid on Mouse over. Please see the first post of this thread.
I don't know much about it, Can you please correct me where it is wrong?

I mean I have given the code, please let me know where and what is wrong. so that next time I will keep your suggestion in mind to implement such things.

Please give me your suggestion.

26 Mar 2012, 6:17 AM
Please suggest me, what is wrong here
Also the Grid in tooltip is not that much working proper at my end, as sometime it shows double the text.


i.e. if I [instade of mouseover , I am using click event ] clicked 3-4 times on images , it show as shown above.

Let me know weather showing the Grid in tooltip is proper idea or not?
Also what is wrong in my code. Please correct me if I am wrong anywhere.

26 Mar 2012, 9:10 PM
Any suggestion on this?

27 Mar 2012, 3:22 AM
Can you suggest me here?