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

Question

在带有标题栏和列表的操作表中，我正在实现一些按钮，用于过滤列表绑定到的商店（“ListinoStore”）。 按钮是为商店中的每个项目动态生成的；项目可能是 4+，所以按钮应该跨越多行。 这些按钮被添加到一个面板中，该面板设置在标题栏和列表之间。 我只在一行中获取所有按钮，那些超出视口的按钮是隐藏的：我怎样才能让它们自动换行超过两行或更多行？ 我尝试使用 layout: '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
                    }
                ]
            });

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

Answer 1

我解决了 我用docked: 'top' 配置了标题栏和标签面板。