javascript - Ext JS 6.5 菜单自动隐藏

Question

我正在使用 Ext JS 6.5.3.57 。我有文件 Menu.js 用于查看

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

})

文件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'

});

当我按下菜单项时，它会自动隐藏。如何避免点击菜单项后隐藏？

Answer 1

有hideOnClick Ext.menu.Item 中的配置默认为 true

和autoHide Ext.menu.Menu 上的配置默认为 true

如果您将 hideOnClick 设置为 false，则不会隐藏其所有者菜单

如果将 autoHide 设置为 false，当焦点移动到其他位置时，它会阻止菜单自动隐藏

所以只需将以下代码添加到菜单配置

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

这是Fiddle