使用自动调整在面板内动态添加面板答案

【问题标题】：adding panel within panel dynamically with autoadjust使用自动调整在面板内动态添加面板
【发布时间】：2014-03-04 09:20:12
【问题描述】：

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

如果我这样做，这很好用

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

父面板配置了 hbox 布局。

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

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

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

谢谢

【问题讨论】：

你试过设置内面板宽度吗？

标签： extjs extjs4.2

【解决方案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
    }
]);

【讨论】：

它以垂直方式添加面板，我不希望这样...我将父面板布局更改为 Table 并解决了。

【解决方案2】：

父面板布局应该是带有指定列数的表格。父面板见以下代码

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

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

谢谢

【讨论】：