Button Sencha Touch动态添加带换行的按钮

在带有标题栏和列表的actionsheet中，我实现了一些按钮，用于过滤列表绑定到的商店（“ListInStore”）。 为商店中的每个项目动态生成按钮；项目可以是4+，因此按钮应该跨越一行或多行。 按钮将添加到面板中，该面板设置在标题栏和列表之间。 我只在一行中获取所有按钮，视口之外的按钮是隐藏的：如何让它们自动环绕两行或更多行？ 我尝试使用布局：“hbox”或其他东西，但没有成功

// 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
                    }
                ]
            });

更新 如果我使用停靠的“顶部”来配置TagsPanel，从面板和按钮中删除任何布局配置，我会使按钮以正确的方式排列，但当然是在标题栏的顶部。

我解决了 我将标题栏和标签页都配置为

停靠：“top”