Sprite event listeners

[slemmon]

I've got a draw component with 50 sprites on the draw surface. I'm wanting to capture click events on the sprites. What is the best way to go about it?

I tried the following on the draw component:

listeners: {
el: {
click: {
fn: function (e) {
console.log()
}
, delegate: 'path'
}
}

I get a click registered on the sprite, but I'm not sure how to get access to the sprite object itself to all the properties and methods and whatnot. I can add a listener to each sprite, but wanting to add less click listeners if possible.

[slemmon]

This is what I've come up with. Works, but I wonder if it could be more elegant.


listeners: {
el: {
click: {
fn: function (e) {
var draw = Ext.ComponentQuery.query('draw')[0];
var sprite = draw.surface.items.findBy(function(item){
return (item.id == e.getTarget().id);
});
sprite.setAttributes({fill: 'blue'}, true);
}
, delegate: 'path'
}
}
}

[slemmon]

Hmm... works in FF and Chrome, but not in IE8. Guess it renders the elements on the page differently. I'm not practiced at inspecting IE elements. Any tips?