View Full Version : How to add listerner to href link in extjs grid

22 Jun 2010, 4:52 AM
I want to invoke a specific function based on the link click in a grid cell. Though I am able to invoke a browser page using renderer function, I am not able to pass in the values to a function from which I want to invoke a window by clicking the link from a grid cell. Please find the code below.

header : 'Report',
dataIndex : 'report',
sortable : true,
width : 70,
renderer : function(value, metaData, record) {
var hvName = record.get('Name');
var syslogURL = "http://mywebsite.com:9898/"+hvName+".log";
return "<a href='" + syslogURL + "' target='" + "_blank" + "'>syslog</a>";
//return "<a href='"+ "'# onclick=OpenVM("pass hvName here");return false;'" + "'>syslog</a>";
I want to acheive the one I marked in RED color. The one above the commented red statement works fine and opens the page in a browser. Can any one of you please help me in this case? Thanks in advance.

22 Jun 2010, 6:40 AM
I hate "onClick".

Why not use CellSelectionModel and then listen for the cellclick event? You can get the row and also the column that was clicked.

22 Jun 2010, 7:17 AM
You don't really need a selection model. Unless you actually want to be able to maintain selections.

Just use the GridPanel's cellclick event.

30 Jun 2010, 12:34 AM
Thanks Animal. But this is for the whole grid and whatever cell I click, this would get invoked. I want it for a particular column the cell click to be enabled. How do I do it?

P.S.: I was on vacation so far and hence didn't test the details. Sorry for the late response.

30 Jun 2010, 12:49 AM
Did you read my last reply?

30 Jun 2010, 12:59 AM
I have done it. But dont know whether this is the right way? Let me know if there is better options. I just marked the working code in RED color.

var hypervisorGrid = new Ext.grid.GridPanel({
//renderTo : 'center1',
store : store,
columns: hvColumns,
plugins: [hvFilters, hypervisorSearchField],
//plugins: [hvFilters],
autoHeight : true,
stripeRows : true,
listeners:{cellclick:function (grid, rowIndex, columnIndex, e){
var colHeader = grid.getColumnModel().getColumnHeader(columnIndex);
if (colHeader == "VMs") {
var hvName = grid.getStore().getAt(rowIndex).get('HypervisorName');
viewConfig: {
forceFit: true
bbar: new Ext.PagingToolbar({
pageSize: 100,
store: store,
displayInfo: true,
displayMsg: 'Displaying hypervisors {0} - {1} of {2}',
emptyMsg: "No hypervisors found"
tbar: new Ext.Toolbar()

30 Jun 2010, 1:06 AM
That's it. You have a listener.

When you set a breakpoint in there, and follow it through, what happens?

30 Jun 2010, 1:11 AM
Yes. It works fine. Thanks for your help.

Also one more doubt and it may be very simple to you. If I have a JSON like below, how do I read it? Basically I am able to read all the fields except managedState.I read it in my column renderer like

renderer : function(value, metaData, record) {
return record.get('Memory');

"buildVersion": "4.0-u1",
"cores": 8,
"coresAvail": 4,
"disk": 1115,
"lastBootTime": null,
"managedState": {"value": "ERROR"},
"memory": 73728,
"memoryAvail": 73696

Please bail me out.

30 Jun 2010, 1:23 AM

30 Jun 2010, 1:24 AM
Yeah. I got it. Thanks.

30 Jun 2010, 2:38 AM
oooppppsssss....... in my above code, if I click on the CELL, it works perfectly fine. But if I click on the LINK present in the cell, it goes to a blank dummy page. The reason for it is we define the href there. Is there a way to overcome or better solution (I mean in another way like masking the link and disable it's action event etc.)?

30 Jun 2010, 2:58 AM
I have tweaked the code like this

renderer : function(value, metaData, record) {
var vmCount = record.get('vmCount');
//return "<a href='" + vmCount + "'>"+ vmCount +"</a>";
return "<font color= '" + "Blue" +"'><u>"+vmCount+"</u></font>"

But that is fooling around people....Is there any real way available for it?

30 Jun 2010, 3:06 AM
What do you mean? The thing should not be a link.

Don't use <font> and color=".." Come on! It's not 1994!

30 Jun 2010, 3:36 AM
I know it's not a link. But I want to give an impression that they click on a link but actually a text content underlined. If I give href there, it goes to empty page as I said. If any other area inside the cell is clicked, it opens up what I wanted. How to overcome is that?

30 Jun 2010, 4:07 AM
Remove the renderer.

Style that column with CSS.