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

Question

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

Panel1      panel3      panel5 ....

Panel2      panel4      panel6 ....

我尝试了列布局，但它按列增长。我试图用 vertical: true。

if (itemLength % 2 === 1 && itemLength !== 0) {
    container.setLayout({
        vertical : true
    })
} else {
    container.setLayout({
        vertical : false
    })
}

似乎没有任何效果。

Answer 1

您可以将hbox 布局用于要在其中水平添加面板的容器和vbox 用于垂直添加。

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

并提供 flex 以在添加或删除时相应地调整高度和宽度。

flex: 1;

Here 你可以找到适合你的场景的小提琴。当您单击添加按钮时，将在您的容器中水平添加一个面板，该面板具有一个删除按钮，宽度将相应调整，删除时也会注意。