Question

在带有标题栏和列表的动作表中，我实现了一些按钮，用于过滤列表绑定的商店（＆＃34; ListinoStore＆＃34;）。为商店中的每个项目动态生成按钮;项目可能是4+，因此按钮预计会超过一行。按钮被添加到面板中，该面板设置在标题栏和列表之间。我只将所有按钮放在一行中，隐藏在视口之外的那些按钮：我怎么能让它们自动包裹两条或更多条线？我没有尝试使用布局：＆＃39; hbox＆＃39;或其他东西。

// 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'配置了标题栏和标签面板。

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

1 个答案: