PDA

View Full Version : Show dynamic Grid on image mouse over



AtulDawkhare
2 Mar 2012, 2:59 AM
Hi
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();});
32314
1] But here i have used "itemclick" , instated of this I want mouse over event.

Please suggest me how to do that?

mitchellsimoens
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.

AtulDawkhare
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.


columns:[


{
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.
32965
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.

AtulDawkhare
21 Mar 2012, 9:57 PM
any suggestion ?

mitchellsimoens
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'

AtulDawkhare
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,
autoHide:false,
delegate: view.cellSelector,
trackMouse: true,
renderTo: Ext.getBody(),
listeners: {
beforeshow: function updateTipBody(tip) {
tip.insert(0,toolTipGrid);
}
}
}).show();
}
});


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
33010

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

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

mitchellsimoens
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.

AtulDawkhare
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.

AtulDawkhare
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.

33146

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.

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

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