Ext JS 6.5 Menu auto-hide

Question

I am using Ext JS 6.5.3.57 . I have file Menu.js for view

Ext.define('Foo.view.menu.Menu', {
    extend: 'Ext.Panel',
    xtype: 'menu_foo',

    requires: [
        'Ext.menu.Menu'
    ],

    autoSize: true,
    bodyPadding: 20,
    width: 230,
    items: {
        xtype: 'menu',
        floated: false,
        docked: 'left',
        alwaysOnTop: true,
        items: [{
            text: 'System setup',
        },{
            text: 'Cash'
        },{
            text: 'regular item 3'
        }]
    }

})

File app.js

// File /Users/donhuvy/Desktop/vy_sencha/app.js

/*
 * This file launches the application by asking Ext JS to create
 * and launch() the Application class.
 */
Ext.application({
    extend: 'Acc.Application',

    name: 'Foo',

    requires: [
        // This will automatically load all classes in the Foo namespace
        // so that application classes do not need to require each other.
        'Foo.*'
    ],

    // The name of the initial view to create.
    //mainView: 'Foo.view.main.Main'
    mainView: 'Foo.view.menu.Menu'

});

When I press on menu item, it hide automatically. How to avoid it hide after click on menu item?

Answer 1

There is hideOnClick config in Ext.menu.Item that is true by deafult

And autoHide config on Ext.menu.Menu that is true by default

If you set hideOnClick to false it won't hide it's owner menu

If you set autoHide to false it prevents the menu from auto-hiding when focus moves elsewhere

So just add following code to menu config

{
   allowOtherMenus: true,
   autoHide: false,
   defaults:{ 
       hideOnClick: false 
   }
}

Here is the Fiddle