Multiple lines with containers

[lupin77]

Hi guys,

Can anyone experienced give me some clue how to force "line break" while using hbox layout with many elements?

Here is sample code:

xtype:'container',
height:30,
layout:
{
type:'hbox'
},
items: [
{ xtype: 'button', width:100, text: 'Btn 1', margin: 2 },
{ xtype: 'button', width:100, text: 'Btn 2', margin: 2 },
{ xtype: 'button', width:100, text: 'Btn 3', margin: 2 },
{ xtype: 'button', width:100, text: 'Btn 4', margin: 2 },
]

Considering 300px window width, one element is not visible. How to make it move to the next line automatically?

General, I want to add elements dynamically with different widths.

Any suggestions appreciated.

[bricemason]

You could instead use the default layout and float all the children like this:

{
    xtype: 'container',
    title: 'Welcome',
    width: 300,
    defaults: {
        style: {
            float: 'left'
        }
    },
    items: [
        { xtype: 'button', width:100, text: 'Btn 1', margin: 2 },
        { xtype: 'button', width:100, text: 'Btn 2', margin: 2 },
        { xtype: 'button', width:100, text: 'Btn 3', margin: 2 },
        { xtype: 'button', width:100, text: 'Btn 4', margin: 2 }
    ]
}

This example uses an inline style but you could just as easily assign a css class in the defaults block for the children.

Brice

[lupin77]

That is exactly what I was looking for. Thanks!