Question

在制作ExtJS 4 Web应用程序时，我遇到了一个奇怪的绑定。

我的这个面板有一个hbox布局，里面有4个菜单。第一个菜单没有项目，接下来的3个包含不同的数量（现在分别为3,1,1）。当我发现第一个菜单项在其他菜单扩展时展开时，我正在测试菜单的功能。

这是我的代码：

{
    xtype: 'menu',
    flex: 1,
    floating: false,
    itemId: 'menuBtnHome',
    margin: '0 0 0 5',
    width: 120,
    collapsed: false,
    collapsible: false,
    title: 'Home'
},
{
    xtype: 'menu',
    flex: 1,
    margins: '0 0 0 5',
    border: false,
    floating: false,
    itemId: 'menuBtnContactUs',
    width: 120,
    fixed: true,
    collapseDirection: 'bottom',
    collapsed: true,
    collapsible: true,
    title: 'Contact Us',
    items: [
        {
            xtype: 'menuitem',
            text: 'E-Mail'
        },
        {
            xtype: 'menuitem',
            text: 'Customers'
        },
        {
            xtype: 'menuitem',
            text: 'Technical'
        }
    ]
},
{
    xtype: 'menu',
    flex: 1,
    margins: '0 0 0 5',
    border: false,
    floating: false,
    itemId: 'menuBtnDiscuss',
    width: 120,
    fixed: true,
    collapseDirection: 'bottom',
    collapsed: true,
    collapsible: true,
    title: 'Discuss',
    items: [
        {
            xtype: 'menuitem',
            text: 'Menu Item'
        }
    ]
},
{
    xtype: 'menu',
    flex: 1,
    margins: '0 0 0 5',
    border: false,
    floating: false,
    itemId: 'menuBtnShare',
    width: 120,
    fixed: true,
    collapseDirection: 'bottom',
    collapsed: true,
    collapsible: true,
    title: 'Share',
    items: [
        {
            xtype: 'menuitem',
            text: 'Menu Item'
        }
    ]
}

当我展开包含3个项目的第二个菜单时，我的第一个菜单也会扩展，与第二个菜单相同的高度 - 但是有空白项目。菜单3和4也会出现相同的情况。我不确定为什么会发生这种情况。

我删除了第一个菜单中的collapsed，collapsible和collapseDirection属性，因为我不需要它们。菜单在没有箭头的情况下正确渲染。

如果我在第一个菜单的这些属性中放置，菜单将使用箭头呈现（建议它有菜单项），但点击它或任何事情都不会做任何事情。扩展其他菜单也不会影响它。

我有点陷入困境，我有两个主要问题需要解决。

我只是错过了设置一个属性或任何会导致＆＃34; unntangle＆＃34;我的第一个菜单和其他菜单？
有没有办法在CSS的帮助下删除ExtJS中的箭头图标？我可以设置collapse-属性，但我必须摆脱箭头图标。

ExtJS - 当其他菜单展开时，空白菜单展开，没有项目

0 个答案: