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

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

和 autoHide 在 Ext.menu.Menu 上配置，默认情况下是 true

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

如果您将 autoHide 设置为 false，它会阻止菜单在焦点移动到别处时自动隐藏

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

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

这里是Fiddle

Ext JS 6.5 菜单自动隐藏

Ext JS 6.5 Menu auto-hide

javascript

extjs

extjs6