如何为（grid.feature.Grouping）创建 ExtJS 4 mouseenter / mouseleave 状态？

Posted 2023-02-26

【中文标题】如何为（grid.feature.Grouping）创建 ExtJS 4 mouseenter / mouseleave 状态？

【英文标题】：How to create a ExtJS 4 mouseenter / mouseleave state for (grid.feature.Grouping)?

【发布时间】：2012-07-30 23:47:46

【问题描述】：

我想创建一个 mouseenter / mouseleave 状态以将鼠标悬停在组标题上。 Ext.grid.feature.Grouping 类中似乎没有引发任何悬停事件。

鼠标输入，分组标题中的 ^ 会变成白色 鼠标离开，分组标题，会将^改回#999

建议？

【参考方案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) 
                // ...