动态地在面板内添加面板自动调整

Question

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

，如果我做

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

父面板配置了横向盒布局也能正常工作。

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

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

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

感谢

Answer 1

父

面板布局应当是表与指定的列数。 请看下面的代码为父面板

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

这解决了我的问题，希望它有助于某人。

谢谢

Answer 2

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