column renderer and getting references to elements

[jbraband]

I have a column in a grid that is receiving an XML doc as data. I will loop over nodes in said doc and attach an image icon for each node. here is my start



Render_Languages: function(value, cell, record, rowIndex, colIndex, store){
var s = [];

var template = ['<a href="#">',
' <img src="{src}" width="' + C4.Languages.FlagWidth + '" height="' + C4.Languages.FlagHeight + '" alt="{alt}"></img>',
'</a>'];

var t = new Ext.Template(template);

for (var i = 0, l; l = value[i]; i++) {
s[i] = t.applyTemplate({src: 'path/to/icon/, alt: 'Language Name'});
}
return s.join("");
}


I have setup a template for the image tag and anchor tag. for each pass through the loop i apply the template to data and add it to an array. the renderer returns a join() of the array to the grid. the icons display fine. its elegant. however: i need to assign click event handlers to these icons. because I am only calling applyTemplate, the img tags arent actually added to the dom and therefore I am unable to do Ext.get() to retrieve the element and assign a click delegate.

it seems that at this point in the rendering process, nothing is actually there to attach delegates to. what other approaches can I try to accomplish this? I'd hate to have to make a collection of all the icons i added for all the rows and then spin through them once the grid is done rendering.

what it comes down to is how can i attach a click delegate when I apply the template in the custom renderer?

Thanks,

-j