CODEWITHSUNDEEP
javascriptextjsmenuextjs6extjs6-classic
Florian Schinnerl
Florian Schinnerl

Reputation: 23

How to display sub-menus on click instead of mouseover in extjs 6?

In an extjs 6 menu, how can I set sub-menus to be displayed on click and not on mouseover? I haven't found any config to set the display trigger of sub-menus, and using buttons as menu items didn't work either. 

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'
                }]
            }
        }]
    });

Upvotes: 2

Views: 2536

Answers (1)

Guilherme Lopes
Guilherme Lopes

Reputation: 4760

You will have to override the Menu onMouseOver and onClick methods to prevent the menu from being expanded. It will be also necessary that you add a ignoreParentClicks config to your menu.

It will look something like: 

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);
    }
});

Check this fiddle: https://fiddle.sencha.com/#fiddle/u1m

Upvotes: 2

Related Questions