如何为（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 事件。您必须等待渲染事件才能首先获取组件元素，这有点难看。然后，您必须使用 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) {
                // ...
            }
        }
    }
}