extjs4 - (grid.feature.Grouping) の ExtJS 4 mouseenter / mouseleave 状態を作成するには?

Question

グループ ヘッダーの上にマウスを移動するための mouseenter / mouseleave 状態を作成したいと考えています。Ext.grid.feature.Grouping クラス内でスローされるホバー イベントはないようです。

• グループ化ヘッダーのマウス エンターは、^ を白に変更します。
• グループ化ヘッダーのマウスを離すと、^ が #999 に戻ります

提案？

Answer 1

ExtJS のひどいイベント バインディングを使用して、mouseenter / mouseleave イベントに適切に委譲する解決策を見つけることができませんでした。

さらに、grid.feature.Grouping 機能自体をコンポーネント クエリ/クエリする方法がわかりませんでした。

ただし、委任リスナーを mouseover / mouseout イベントに追加する方法を理解しました。コンポーネント要素を最初に取得するためにrenderイベントを待たなければならないのはちょっと醜いです。次に、委任された要素の addManagedListener に this.mon (ひどい名前) を使用してバインドする必要があります。

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) {
                // ...
            }
        }
    }
}