Sencha Touch dynamically add buttons with line wrap - button

Question

in an actionsheet with a titlebar and a list, I'm implementing some buttons to be used for filtering the store ("ListinoStore") the list is bound to.
The buttons are generated dynamically for each item in a store; items could be 4+, so buttons are expected to span over one o more lines.
The buttons are added to a panel, which is set between the Titlebar and the List.
I'm only getting all buttons in a single line, those beyond the viewport are hidden: how could I get them automatically wrapping over two or more lines?
I unsuccessfully tried using layout: 'hbox', or other things.
// the store
{
"success":true
, "total": 9
, "root": [
{"tag" : "white"}
, {"tag" : "red"}
, {"tag" : "blue"}
, {"tag" : "green"}
, {"tag" : "orange"}
, {"tag" : "purple"}
, {"tag" : "yellow"}
, {"tag" : "pink"}
, {"tag" : "grey"}
]
}
var TagsPanel = new Ext.Panel({
items: [
{
xtype : 'button'
, text: 'All'
, ui: 'small'
, handler: function() {
ListinoStore.clearFilter();
}
}
]
});
TagsStore.each(function(record){
TagBtn = new Ext.Button({
text: record.get('tag')
, style: 'float: left;'
, ui: 'small'
, handler: function() {
ListinoStore.clearFilter();
ListinoStore.filter(function(item) {
return item.get('tag').search(record.get('tag')) > -1;
});
}
});
TagsPanel.add(TagBtn);
});
var ListinoSheet = new Ext.ActionSheet({
fullscreen: true
, layout: 'vbox'
, style: 'top:0px'
, defaults: {
handler: function(btn, evt) {
this.parent.hide();
} // handler
} // defaults
, items: [
{
xtype: 'titlebar'
, title: 'Le nostre migliori pizze'
, ui: 'light'
}
, TagsPanel
, {
xtype: 'ListinoList'
, flex: 1
}
]
});
UPDATE
If I config the TagsPanel with docked: 'top', removing any layout config both from the panel and the buttons, I get the buttons lining in the right way, but of course on the top of the titlebar.

Answer 1

I solved
I configured both the titlebar and the tagspanel with docked: 'top'.