Remove “button styling” in sencha touch?

Question

I'm using this inside a toolbar:

items: [
                    { text: 'Hem',  },
                    { text: 'Sport' },
                    { text: 'Nöje'  },
                ]

And the result I get looks like this image below:

I get this style that looks like an button, I don't want that. I want just these buttons to show like picture number 2:

How? In picture 2 I have a screenshot from the "tab" example. I cannot create a tab instead because then I can't scroll among the buttons... I'm really new at this and want great help. My English is not so good so please, use a simple languange. Cheers!

Answer 1

Both in Sencha touch 1 and Sencha touch 2, the following code would produce round buttons:

xtype: 'toolbar',
items : [
            { text: 'Hem', ui :'round' },
            { text: 'Sport', ui :'round' },
            { text: 'Nöje', ui :'round'  },
        ]

ie: Just add the ui : 'round' key and value for each item object in the items array.

Answer 2

You can surely make buttons look rounded by adding ui:'round' for each button. That's one solution. But I want to ans your this quote.

I cannot create a tab instead because then I can't scroll among the buttons

This is not true. You can definitely scroll amoung the buttons if button goes beyond your viewport. I have used them myself where I needed 7 tabs for a mobile app and those can not be fitted both in landscape and portrait mode. There one property you need to set to make tabs scrollable. Here a sample of my code that worked for me.

Ext.create('Ext.TabPanel', {
    fullscreen: true,
    tabBarPosition: 'top',
    tabBar: {
        scrollable: {
            direction: 'horizontal'
        }
    },
    defaults: {
        styleHtmlContent: true
    },

    items: [
        {
            title: 'Monday',
            html: 'Monday Screen'
        },
        {
            title: 'Tuesday',
            html: 'Tuesday Screen'
        },
        {
            title: 'Wednesday',
            html: 'Wednesday Screen'
        },
        {
            title: 'Thursday',           
            html: 'Thursday Screen'
        },
        {
            title: 'Firday',
            html: 'Firday Screen'
        },
        {
            title: 'Saturday',
            html: 'Saturday Screen'
        },
        {
            title: 'Sunday',
            html: 'Sunday Screen'
        }
    ]
});

Give it a try as this definitely works. :D