动态添加具有固定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: 1;

Here您可以找到适合您的方案的小提琴。当您单击添加按钮时，一个面板将被添加到您的容器中，该面板具有一个删除按钮，并且宽度将被相应地调整，并且在删除时同样要小心。