Question

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

如果我这样做，这可以正常工作

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

父面板配置了hbox布局。

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

而我正在寻找的是它应该在面板到达父面板宽度时自动将面板添加到下一行。

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

由于

Answer 1

我有一个想法，但您应该尝试使用代码，然后让我知道结果。基本上，将布局类型设置为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
    }
]);

Answer 2

父面板布局应为Table，并指定列数。有关父面板的信息，请参阅以下代码

{
    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);
             }

这解决了我的问题，希望它有所帮助。

由于

通过autoadjust动态添加面板内的面板

2 个答案: