javascript - 如何在 extjs 6 中单击而不是鼠标悬停时显示子菜单？

Question

在 extjs 6 菜单中，如何设置子菜单在单击时显示而不是在鼠标悬停时显示？我还没有找到任何配置来设置子菜单的显示触发器，并且使用按钮作为菜单项也不起作用。

var myMenu = Ext.create({
        xtype: 'menu',
        items: [{
            text: 'Menu Item 1',
            menu: {
                items: [{
                    text: 'sub-Menu Item 1'
                }, {
                    text: 'sub-Menu Item 2'
                }]
            }
        }, {
            text: 'Menu Item 2',
            menu: {
                items: [{
                    text: 'sub-Menu Item 1'
                }, {
                    text: 'sub-Menu Item 2'
                }]
            }
        }]
    });

Answer 1

您必须重写 Menu 的 onMouseOver 和 onClick 方法以防止菜单展开。您还需要向菜单添加 ignoreParentClicks 配置。

它看起来像:

Ext.define('Ext.o.menu.Menu', {
    override : 'Ext.menu.Menu',
    onClick: function(e) {
        var me = this,
            type = e.type,
            item,
            clickResult,
            iskeyEvent = type === 'keydown';

        if (me.disabled) {
            e.stopEvent();
            return;
        }
        item = me.getItemFromEvent(e);
        if (item && item.isMenuItem) {
            if (!item.menu || !me.ignoreParentClicks) {
                clickResult = item.onClick(e);
            } else {
                e.stopEvent();
            }

            // SPACE and ENTER invokes the menu
            if (item.menu && clickResult !== false) {
                item.expandMenu(e, 0);
            }
        }
        // Click event may be fired without an item, so we need a second check
        if (!item || item.disabled) {
            item = undefined;
        }
        me.fireEvent('click', me, item, e);
    },
    onMouseOver: function(e) {
        var me = this,
            fromEl = e.getRelatedTarget(),
            mouseEnter = !me.el.contains(fromEl),
            item = me.getItemFromEvent(e),
            parentMenu = me.parentMenu,
            ownerCmp = me.ownerCmp;

        if (mouseEnter && parentMenu) {
            parentMenu.setActiveItem(ownerCmp);
            ownerCmp.cancelDeferHide();
            parentMenu.mouseMonitor.mouseenter();
        }

        if (me.disabled) {
            return;
        }

        // Do not activate the item if the mouseover was within the item, and it's already active
        if (item) {
            if (!item.containsFocus) {
                item.focus();
            }
            // This will not be needed here!
            //if (item.expandMenu) {
                //item.expandMenu(e);
            //}
        }
        if (mouseEnter) {
            me.fireEvent('mouseenter', me, e);
        }
        me.fireEvent('mouseover', me, item, e);
    }
});

检查这个 fiddle :https://fiddle.sencha.com/#fiddle/u1m