Как создать ExtJS 4 состояние mouseenter/mouseleave для (grid.feature.Grouping)?

Я не мог найти решение для правильного делегирования событий mouseenter/mouseleave с использованием ужасной привязки событий ExtJS.

Кроме того, я не мог понять, как компонент запросить/запросить саму функцию grid.feature.Grouping.

Тем не менее, я понял, как добавить слушателей делегирования к событиям mouseover/mouseout. Немного некрасиво, что вам нужно дождаться события рендеринга, чтобы сначала получить элемент компонентов. Затем вам нужно выполнить привязку с помощью this.mon (ужасно названного) к addManagedListener в делегированном элементе.

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;
    }
});

Это решение намного чище, чем использование супервложенной версии без области видимости:

listeners: {
    el: {
        mouseover: {
            delegate: '.x-grid-group-hd',
            fn: function (event, html, eOpts) {
                // ...
            }
        }
    }
}