Question

我正在编写一个Rally应用程序，它在单独的Rally容器中同时包含图表和网格。容器处于“vbox”（垂直框）布局中。它们的设置如下：

{
    xtype: 'container',
    itemId: 'rightView',
    flex: 1,
    layout: 'vbox',
    items: [
        {
            xtype: 'container',
            itemId: 'topRightView',
            flex: 1
        },
        {
            xtype: 'container',
            itemId: 'bottomRightView',
            flex: 1
        }
    ]
}

图表位于topRightView中，网格位于bottomRightView

中

首次渲染时，网格与图表完全重叠。但是，当我根本调整窗口大小时，它们会转到它们应该是的位置（图表位于网格上方）。

网格和图表的css是：

.builds-grid {
    width:600px;
}

.builds-chart {
    margin-top: 30px;
    border: dotted;
    width: 700px;
}

在检查图表和网格html之后，我发现两者的位置都是相对的，因此不应该弄乱它。

我还尝试在两者上放置不同的z索引以确保它们不重叠，但这没有用。

网格在图表之前呈现，因此这可能是问题的一部分。我真的不知道该怎么做;任何帮助将不胜感激！谢谢！

Answer 1

在您的热门代码段中，添加以下行：

height: 400px,

进入将持有图表的容器中。最终应该看起来像这样：

{
    xtype: 'container',
    itemId: 'rightView',
    flex: 1,
    layout: 'vbox',
    items: [
        {
            xtype: 'container',
            itemId: 'topRightView',
            height: 400px,
            flex: 1
        },
        {
            xtype: 'container',
            itemId: 'bottomRightView',
            flex: 1
        }
    ]
}

组件开始重叠，然后在调整窗口大小时移动

1 个答案: