flow layout button panel

[kworam]

I am trying to make a panel that contains a dynamic number of buttons. I would like to layout the buttons as if they were 'inline' HTML elements in a flow layout. In other words, I would like the first button to be positioned at the top-left corner of the panel, the next button to its right and so on. If a button overflows the right edge of the panel, I would like to 'line break' to the next 'line' in the panel and begin laying out the remaining buttons on the next line. Is there an existing layout manager that does this or is there some sample code that does this?

Thanks.

[mitchellsimoens]

Two options, if you want to have flex sizing then you can use hbox layout. Other wise a more performant way is to give the buttons some CSS like display : inline-block;

[kworam]

I decided to try your CSS suggestion so I configured my buttons as follows:

{
xtype: 'button',
text: 'abc',
maxWidth: '50px',
margin: 5,
cls: 'display : inline-block;'
},

When I specified no layout on the containing panel, the buttons were displayed one per line. When I set the layout of the containing panel to 'hbox', but the buttons did not line-break to the next line but were laid out in a single line that extended off the right edge of the screen.

[mitchellsimoens]

The cls config expects a CSS class name

cls : 'button-inline'

And then in your CSS file:

.button-inline {
    display : inline-block;
}

[kworam]

That did it! Thanks a lot for your help.