Row Hyperlinks in Simple GRID

[JSCoder]

I have a grid with three columns. I construct this from a regular HTML table.

The first column in my TABLE is a hyperlink column (simple text links in each cell).

EXTJS renders the GRID, and the first column in the GRID also contains text hyperlinks. All well and good.

Thing is, I want the whole row to be clickable to go to that hyperlink, not just that little text link.

Is there a way to make this happen?
Thanks.

[soze]

You can add a listener to the grid for single or double-click. In the function you dynamically specify the link that you want to open based on the 1st cell content.

I would suggest a double-click to prevent accidental clicking of row items.



listeners: {
rowdblclick: function(gridv, rowIndex, columnIndex, e){
var record = gridv.getStore().getAt(rowIndex); // Get the Record
var link= record.data.cell1Link;
//Manipulate or do whatever you want in terms of bringing a new window or loading the page in a mini-window.

}
}

[JSCoder]

I'm using this code, and it's not working :( What am I doing wrong?
I just want to navigate to the URL in the same window, that's all. And on single click, not double. How can I code that?




Ext.onReady(
function()
{

if (document.getElementById("myTable") != null)
{
var grid = new Ext.grid.TableGrid("myTable", {
stripeRows: true,
frame: true,
title: 'Search Results',
width: 760,
height: 220,
listeners: {
rowdblclick: function(gridv, rowIndex, columnIndex, e)
{
var record = gridv.getStore().getAt(rowIndex);
var link = record.data.cell3Link;
}
},
renderTo: document.body
});

grid.render();
}
});



(And yes, the link is in column 3).

[JSCoder]

Hate to say this, and I know it's against the forum etiquette, but I have an urgent need for this one. Any help?

[Lukman]

Change 'rowdblclick' to 'rowclick'?

Then use
document.location = link;

[JSCoder]

Change 'rowdblclick' to 'rowclick'?

Then use
document.location = link;

Not working! :(( This is my full code:



Ext.onReady(
function()
{

if (document.getElementById("myTable") != null)
{
var grid = new Ext.grid.TableGrid("myTable", {
stripeRows: true,
frame: true,
title: 'Search Results',
width: 760,
height: 220,
listeners: {
rowclick: function(gridv, rowIndex, columnIndex, e)
{
var record = gridv.getStore().getAt(rowIndex);
var link = record.data.cell3Link;
//document.location = link;
alert(link + "\n" + record);
}
},
renderTo: document.body
});

grid.render();
}
});


The alert produces:

undefined
[object Object]

[Lukman]

Simply because record.data.cell3Link is undefined? Are you sure your record.data contain cell3Link member variable? If you are using firefox, try doing:

alert(record.data.toSource());
to examine what's inside record.data