Question

我在工具栏中使用它：

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

我得到的结果如下图所示：

Example

我觉得这个样式看起来像一个按钮，我不希望这样。我希望这些按钮只显示图片编号2：

Example

如何？在图2中，我有一个“tab”示例的截图。我不能创建一个标签，因为我不能在按钮之间滚动... 我真的很陌生，希望得到很大的帮助。我的英语不太好，请使用简单的语言。干杯！

Answer 1

在Sencha touch 1和Sencha touch 2中，以下代码都会生成圆形按钮：

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

即：只需为ui : 'round'数组中的每个项目对象添加items键和值。

Answer 2

您可以通过为每个按钮添加ui:'round'来使按钮看起来舍入。这是一个解决方案。但我想回答你的这句话。

我无法创建标签，因为我无法在其中滚动按钮

事实并非如此。如果按钮超出视口，您绝对可以滚动按钮。我自己使用过它们，我需要7个标签用于移动应用程序，而这些标签无法同时适用于横向和纵向模式。您需要设置一个属性以使选项卡可滚动。这是我的代码示例，对我有用。

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

尝试一下，因为这绝对有效。：D

删除sencha touch中的“按钮样式”？

2 个答案: