adding panel within panel dynamically with autoadjust - extjs

Question

I want to add panels within a panel dynamically, since i dont know upfront the numbers of panels which i need to add.
This works fine if i do
panel.insert(<panel to be added>);
The parent panel is configured with the hbox layout.
But if the overall width of added panels goes beyond the parent panel width then there is a overflow and a horizontal scrollbar appears.
Rather what i am looking is it should add the panels to the next line automatically if it reaches the parent panels width.
Any solution to the above problem, might be i need to use some other layout here but not sure on that.
Thanks

Answer 1

I have one idea but you should try in your code then let me know the result. Basically, set layout type to 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

Parent panel layout should be Table with number of columns specified.
See the following code for parent panel
{
xtype: 'panel',
itemId: 'productListPanel',
height: 500,
width: 600,
layout: {
type: 'table',
columns: 3
},
autoScroll: true
}
now i can add any number of child panels to it, see the following code.
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);
}
This solved my problem, hope it helps somebody.
Thanks