Question

当用户的光标离开Ext.menu.Item时（通过关闭菜单下拉菜单），我想从最后一个鼠标的菜单项中删除'x-menu-item-active'类。

目前这不会自动发生在Ext 6.0.2中，即，当用户从Ext.menu中移出时，用户悬停的最后一个菜单项仍包含'x-menu-item-active'类。

目前我正在以这种方式实现这一目标：

Ext.define('MyApp.someController', {

    init: function() {
        var me = this;

        me.control({

             '#idOfMyMenu': {
                   mouseleave: me.onMouseLeave
             }
        });

    },

    onMouseLeave: function(target) {
        var me = this,
            activeCls = 'x-menu-item-active',
            menuItems = target.items;

        Ext.each(menuItems, function(item) {
            if (item.hasCls(activeCls)) {
                item.removeCls(activeCls);
            }
        }

    }
}

但是，每当用户将鼠标移出时，这需要在我的下拉菜单中循环所有菜单项。无论如何，我可以专门为Ext.menu.Item附加一个'mouseleave'监听器，这样我就不需要遍历所有菜单项了吗？

Ext.menu.Item类只包含'blur'，'focusleave'事件，这些事件不允许我做我想做的事。

Answer 1

您无法避免循环，但如果您认为它看起来更干净，则可以将其隐藏在DOM API后面......

onMouseLeave: function(menu, ev){
    Ext.fly(ev.getTarget())
        .down('.x-menu-item-active')
        .removeCls('x-menu-item-active');
}

» Fiddle

否则，开箱即用的Ext菜单项上没有鼠标事件，您必须实现自己的自定义组件。

ExtJS 6.02 - 是否可以将mouseleave事件附加到Ext.menu.Item？

1 个答案: