Thank you very much, mitchellsimoens. This is exactly what I needed. For the record, here is the final code that works:
Code:
{
xtype: 'treepanel',
...
{
xtype:'actioncolumn',
items: [{
icon: 'myicon.png',
handler: function(grid, rowIndex, colIndex) {
// do something when icon is clicked
},
}
listeners: {
itemmouseenter: function( view, record, item, rowIndex, e, eOpts ) {
// show the icon
var cmp = Ext.select('#' + Ext.get(item).id +' [src~="myicon.png"]');
cmp.removeCls('x-hide-display');
cmp.addCls('x-grid-center-icon');
},
itemmouseleave: function( view, record, item, rowIndex, e, eOpts ) {
// hide the icon
var cmp = Ext.select('#' + Ext.get(item).id +' [src~="myicon.png"]');
cmp.removeCls('x-grid-center-icon');
cmp.addCls('x-hide-display');
}
}
As you can see, I ended up using the id of the "item" in constructing the select statement, along with the icon name:
Code:
Ext.select('#' + Ext.get(item).id +' [src~="myicon.png"]')
Once the component was found, the rest was easy - adding/removing the css class to show/hide the icon.
Thanks again!