PDA

View Full Version : Tooltip issue when creating Grids in a Loop Dynamically



jeroen_syntux
19 Oct 2010, 5:30 AM
Hello Everyone,

Im trying to create some grids and tabs dynamically. A user can subscribe to subjects and every subject had a tab and a grid on that tab. So some users can see 5 or 6 tabs while others only have 2. This data is passed in an array somewhat like this:

tabpanels["subject1"] = 1 //id i need to pass to the json where the key is the subject name and tab title
tabpanels["subject2"] = 2
tabpanels["subject3"] = 3

Each grid has some tooltips to explain the data the user is looking at. And that is the issue.
Now i can get the tabs and grid to work, but the tooltips only function on the last grid. Which is logical. The loop states var grid = new GridPanel() a few times. So when the loop is done the var grid contains the last grid created.
Does anyone know how i can fix this? Maybe make some dynamic variables or someting. I tried eval(), but that didnt work too wel. Or perhaps store the tooltips in the grid in some way?
Here is the code:



if(tabpanels){
var tabs = new Ext.TabPanel({
id: 'tabpanel',
renderTo: 'tabs',
width:960,
height:500,
frame:true
});
var TabPanel = Ext.getCmp('tabpanel');

for (key in tabpanels) {
// create the data store json/tasklist
var store = new Ext.data.JsonStore({

});
store.setDefaultSort('gain', 'desc');
store.load();

// create the Grid
var grid = new Ext.grid.GridPanel({
id: key,
title: key,
store: store,
columns: []
//lots more stuff
listeners: {
afterrender: function() {
/* Setup tooltip */
var resulttip = new Ext.ToolTip({
title: "Title",
view: grid.getView(),
target: grid.getView().mainBody,
delegate: '.result_hover',
trackMouse: true,
renderTo: document.body,
listeners: {
beforeshow: function updateTipBody(resulttip) {
var i = grid.getView().findRowIndex(resulttip.triggerElement);
var record = grid.getStore().getAt(i);
var id = record.get('id');
var text = record.get('tooltiptext');
resulttip.body.dom.innerHTML = text;
}
}
});
grid.descriptiontip = new Ext.ToolTip({
title: "Task Description",
view: grid.getView(),
target: grid.getView().mainBody,
delegate: '.task_hover',
trackMouse: true,
renderTo: document.body,
listeners: {
beforeshow: function updateTipBody(descriptiontip) {
var i = grid.getView().findRowIndex(descriptiontip.triggerElement);
var record = grid.getStore().getAt(i);
var id = record.get('id');
var text = record.get('description');
descriptiontip.body.dom.innerHTML = text;
}
}
});
}
}
});

TabPanel.add(grid);
TabPanel.doLayout();

}
}
TabPanel.setActiveTab(0);Any thoughts?

Regards,

Jeroen

Animal
19 Oct 2010, 5:41 AM
Use a DataTip.

jeroen_syntux
20 Oct 2010, 4:31 AM
Thanks for the suggestion Animal.
I didn't use DataTip though. I used CellToolTips i found on this forum.

For those interested. I removed the listeners and tooltips from the grid. And added this little piece of code
Obiously you need to add the js to your project includes and add the var to the grid plugins.



var cellTips = new Ext.ux.plugins.grid.CellToolTips([
{ field: 'name', tpl: '<b>Description</b><br />{description}' },
{ field: 'result', tpl: '<b>Tooltip</b><br />{tooltiptext}' }
]);
Thanks for the help

Jeroen