ExtJS 6.02 - 是否可以将一个mouseleave事件附加到Ext.menu.Item?
问题描述:
当用户的光标离开Ext.menu.Item(通过鼠标滑过菜单下拉菜单)时,我想从最后一次鼠标悬停的菜单项中删除'x-menu-item-active'类。ExtJS 6.02 - 是否可以将一个mouseleave事件附加到Ext.menu.Item?
目前这不会在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);
}
}
}
}
然而,这需要遍历在我的下拉菜单中的所有菜单项,每次用户鼠标移出。无论如何,我可以将一个'mouseleave'侦听器附加到Ext.menu.Item中,以便我不需要遍历所有菜单项?
Ext.menu.Item类只包含'blur','focusleave'事件,它们不允许我做我想做的事。
答
你不能避免循环,但可以将其隐藏的DOM API的背后,如果你认为它看起来更清洁......
onMouseLeave: function(menu, ev){
Ext.fly(ev.getTarget())
.down('.x-menu-item-active')
.removeCls('x-menu-item-active');
}
否则有对OUT-没有鼠标事件现成的Ext菜单项,您必须实现自己的自定义组件。