Extjs 使用“自动调整”在面板中动态添加面板

我想在面板中动态添加面板，因为我不知道需要添加的面板数量

如果我这样做的话，效果很好

panel.insert(<panel to be added>);

panel.insert（）；

父面板配置有hbox布局

但是，如果添加的面板的总宽度超过父面板宽度，则会出现溢出，并显示一个水平滚动条

相反，我看到的是，如果面板达到父面板宽度，它应该自动将面板添加到下一行

以上问题的任何解决方案，可能是我需要在这里使用其他布局，但不确定

---

谢谢

我有一个主意，但是你应该尝试一下你的代码，然后告诉我结果。基本上，将布局类型设置为

auto

var resultsPanel = Ext.create('Ext.panel.Panel', {
    title: 'Results',
    width: 600,
    height: 400,
    id: 'panel_one',
    renderTo: Ext.getBody(),
    layout: {
        type: 'auto',       // Arrange child items vertically
        align: 'stretch',    // Each takes up full width
        padding: 5
    }
});

var opanel = Ext.getCmp('panel_one');
console.log(opanel);
opanel.add([
    {
        xtype: 'panel',
        title: 'Inner Panel',
        width: Ext.getCmp('panel_one').getWidth(),
        height: 100
    }
]);

opanel.add([
    {
        xtype: 'panel',
        title: 'Inner Panel',
        width: Ext.getCmp('panel_one').getWidth()
        height: 100
    }
]);

---

父面板布局应为指定列数的表。 有关父面板，请参见以下代码

{
    xtype: 'panel',
    itemId: 'productListPanel',
    height: 500,
    width: 600,
    layout: {
        type: 'table',
        columns: 3
    },
    autoScroll: true
}

现在我可以向它添加任意数量的子面板，请参见下面的代码

 for (var i = 0; i < 10; i++) {
            var panel = Ext.create('Ext.panel.Panel', {
                width: 190,
                height: 150,
                padding: 10,                  
                cls: 'myPanel',
                title: "Child Panle"+i
                });
                parentPanel.insert(panel);
             }

for（变量i=0；i<10；i++）{
var panel=Ext.create（'Ext.panel.panel'{
宽度：190，
身高：150，
填充：10，
cls:“myPanel”，
标题：“子窗格”+i
});
父面板。插入（面板）；
}

这解决了我的问题，希望能帮助到别人

---

谢谢

您试过设置内面板宽度吗？它以垂直方式添加面板，我不希望这样。。。我将父面板布局更改为Table，并解决了这个问题。