Javascript 动态添加具有固定的2行和多列的面板

我想用这种结构动态添加一个面板。它应该在一列中增长，而且如果我删除中间的面板，下一个面板应该在前面移动

Panel1      panel3      panel5 ....

Panel2      panel4      panel6 ....

我尝试了列布局，但它以列方式增长。我试图用

vertical:true

if（itemLength%2==1&&itemLength！==0）{
container.setLayout({
垂直：对
})
}否则{
container.setLayout({
垂直：假
})
}

---

似乎什么都不管用

对于要在其中水平添加面板的容器，可以使用

hbox

布局；对于垂直添加面板的容器，可以使用

vbox

{
   xtype: 'panel',
   layout: {
       type: 'hbox',
       align: 'stretch'
   }
},

并在添加或删除时提供相应的高度和宽度调整

flex: 1;

---

您可以为您的场景找到工作小提琴。当您单击“添加”按钮时，一个面板将水平添加到您的容器中，其中有一个“删除”按钮，宽度将相应调整，删除时也会注意到这一点。

谢谢您的回复。这很好用。但是我想把panel2放在panel1的下面，把panel3动态地放在panel1的右边。确切地说，它应该和列布局相反。它应该只有两行，并按行而不是按列增长。这就是我所说的，对于垂直对齐，您必须使用vbox布局。因此，您可以根据需要编写逻辑。