Sencha Touch dynamically add buttons with line wrap

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.

En-j En-j · Accepted Answer · 2014-07-16T23:21:50

0

votes

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

Sencha Touch dynamically add buttons with line wrap

1 Answers