Ext JS 6.5.3.57菜单点击自动隐藏问题咨询及解决需求

针对你的场景，有两种直接有效的方法可以阻止菜单点击后的自动隐藏行为，你可以根据需求选择：

方法一：给单个菜单项配置hideOnClick: false #

如果只想让特定的菜单项点击后不隐藏菜单，或者需要精细控制每个项的行为，推荐用这个方法。只需要给每个需要保留菜单的菜单项添加hideOnClick配置即可：

修改你的Menu.js中菜单的items部分：

items: {
    xtype: 'menu',
    floated: false,
    docked: 'left',
    alwaysOnTop: true,
    items: [{
        text: 'System setup',
        hideOnClick: false // 阻止该项点击后隐藏菜单
    },{
        text: 'Cash',
        hideOnClick: false // 阻止该项点击后隐藏菜单
    },{
        text: 'regular item 3',
        hideOnClick: false // 阻止该项点击后隐藏菜单
    }]
}

这个配置是Ext.menu.Item的原生属性，在6.5.3版本中完全支持，作用就是禁用当前菜单项点击后的菜单隐藏逻辑。

方法二：给全局菜单添加beforehide事件监听器 #

如果希望整个菜单不管点击哪个项都保持显示，或者需要根据动态条件决定是否隐藏，就用这种方法。通过监听菜单的beforehide事件，返回false来阻止默认的隐藏行为：

修改你的Menu.js菜单配置：

items: {
    xtype: 'menu',
    floated: false,
    docked: 'left',
    alwaysOnTop: true,
    listeners: {
        beforehide: function(menu) {
            // 返回false直接阻止菜单隐藏
            return false;
        }
    },
    items: [{
        text: 'System setup',
    },{
        text: 'Cash'
    },{
        text: 'regular item 3'
    }]
}

进阶：条件化控制隐藏 #

如果需要在特定场景下才允许菜单隐藏（比如点击某个特定项时），可以在beforehide事件中做判断：

beforehide: function(menu) {
    // 获取触发隐藏的活跃菜单项
    const clickedItem = menu.getActiveItem();
    // 示例：只有点击"Cash"项时才允许隐藏菜单
    if (clickedItem && clickedItem.getText() === 'Cash') {
        return true; // 允许隐藏
    }
    return false; // 其他情况阻止隐藏
}

两种方法都能完美解决你的问题，根据实际业务需求选择就行~

内容的提问来源于stack exchange，提问作者Đỗ Như Vỹ