View Full Version : Listening to Grid Cell Link (anchor tag) Clicks

28 Mar 2012, 10:07 AM
I am using Ext JS 4 with MVC. I have a grid in which one of the column needs to be a hyperlink. One clicking the hyperlink, i need to do some action(with the grid record) in my controller. What is the best way to do it? Any samples ?

Thought of using 'renderer' but it becomes complex as i have to pass record object back to the controller on clicking the hyperlink.

Please suggest.


28 Mar 2012, 10:25 AM
grid.mon(grid.body, {
scope : grid,
delegate : 'a',
click : function(e, t) {
//<a> has been clicked

28 Mar 2012, 2:44 PM
Thanks mitchellsimoens. I am going to try your sample in my controller to listen to click.

Meanwhile, making the controller aware of view's components (here anchor tag) a good practice in MVC?

is there a way to throw custom event (with record object, rowindex and column index) on the hyperlink click so that the listerners can be added in controller as like Ext component fired event (itemdblclick). The challenge is that listeners won't listen to DOM events (e.g. hyperlink clicks)

Appreciate all your help!


28 Mar 2012, 4:16 PM
Here is one workaround.

I have defined the hyperlink in my grid cell using renderer. I am listening to itemclick event in my controller and checking if the event target of itemclick is the hyperlink (defined a name for the hyperlink) and performing the action.

In my view (grid section):

xtype : 'grid',
name : 'xxx',
store : 'xxx',
columns : [{
header : 'xxx',
dataIndex : 'xxx',
renderer : function(value) {
return '<a name="linkName" href="javascript:;">'
+ value + '</a>';

In Controller:

Ext.define('xxxCtlr', {
extend : 'Ext.app.Controller',
stores : ['xxx'],
models : ['xxx'],
views : ['xxx'],
init : function() {
'xxx grid' : {
itemclick : function(view, record, htmlElement, rowIndex, event, eventOpts) {
if('linkName' == event.target.name) {
//do action


Any better way of doing this, please share.