How to create a ExtJS 4 mouseenter / mouseleave state for (grid.feature.Grouping)? - extjs4

Question

I want to create a mouseenter / mouseleave state for hovering over group headers. There doesn't seem to be any hover events being thrown within the Ext.grid.feature.Grouping class.
Mouse enter, of the grouping header, would change the ^ to white
Mouse leave, of the grouping header, would change the ^ back to #999
Suggestions?

Answer 1

I couldn't figure out a solution to delegate to the mouseenter / mouseleave events properly using ExtJS terrible event binding.
Additionally, I couldn't figure out how to component query / query the grid.feature.Grouping feature itself.
However, I did figure out how to add delegation listeners to the mouseover / mouseout events. Kind of ugly that you have to wait to the render event to get the components element first. Then you have to bind using this.mon (terribly named) to addManagedListener on a delegated element.
Ext.create('Ext.grid.Panel', {
// ...
listeners: {
render: function (cmp, eOpts) {
this.mon(cmp.el, 'mouseover', function (event, html, eOpts) {
var class_names = this.getGroupClassNamesWithoutOver(html);
class_names.push('x-over');
html.className = class_names.join(' ');
}, cmp, {
delegate: '.x-grid-group-hd'
});
this.mon(cmp.el, 'mouseout', function (event, html, eOpts) {
var class_names = this.getGroupClassNamesWithoutOver(html);
html.className = class_names.join(' ');
}, cmp, {
delegate: '.x-grid-group-hd'
});
},
getGroupClassNamesWithoutOver: function (html) {
var class_names = html.className.split(' '),
class_names_length = class_names.length,
new_class_names = [];
while (class_names_length--) {
var class_name = class_names[class_names_length];
if (class_name != 'x-over') {
new_class_names.push(class_name);
}
}
return new_class_names;
}
});
This solution is much cleaner that using the super nested, non scoped version:
listeners: {
el: {
mouseover: {
delegate: '.x-grid-group-hd',
fn: function (event, html, eOpts) {
// ...
}
}
}
}