PDA

View Full Version : Listener on a hyperlink



rTankersley
8 Dec 2011, 8:01 PM
Hey everybody,

I'm creating something like a forum. The list of threads is in a grid. I want the user to be able to click on the title (not the cell the title is in, just the title) to open up the list of responses for that thread. The list of responses are on another card (the panel is in card layout).

So it's similar to a hyperlink, and if there is a way to attach listeners to those that'd be great. But if you know another way, that's fine too.

Thanks for your help

mitchellsimoens
9 Dec 2011, 2:51 PM
You can use a column renderer and return a wrapped text for the title:


renderer: function(title) {
return '<span class="thread-title">' + title + '</span>';
}

Now, you can add a listener to the grid for the click event on that <span> tag. There are two ways to do this:


Ext.create('Ext.grid.Panel', {
//....

listeners : {
el : {
delegate : 'span.thread-title',
click : function(e) {
var view = grid.getView(),
el = e.getTarget('tr', null, true),
rec = view.getRecord(el);
}
}
}
});

or


grid.mon(grid.el, {
delegate : 'span.thread-title',
click : function(e) {
var view = grid.getView(),
el = e.getTarget('tr', null, true),
rec = view.getRecord(el);
}
});

Now, only when you click on the <span class="thread-title"> will this fire and you have the record in the rec variable.

To finish it off, I would style the <span> a little... I would color it and add a cursor:


span.thread-title {
color : #00f;
cursor : pointer;
}

rTankersley
10 Dec 2011, 1:30 PM
That worked perfectly! Thanks a lot.