[英]Remove “button styling” in sencha touch?
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: 我只希望这些按钮显示为图片编号2:
How? 怎么样? In picture 2 I have a screenshot from the "tab" example. 在图片2中,我有一个来自“ tab”示例的屏幕截图。 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. 我的英语不太好,请使用简单的languange。 Cheers! 干杯!
Both in Sencha touch 1 and Sencha touch 2, the following code would produce round buttons: 在Sencha touch 1和Sencha touch 2中,以下代码都会产生圆形按钮:
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. 即:只需为items
数组中的每个item对象添加ui : 'round'
键和值。
You can surely make buttons look rounded by adding ui:'round'
for each button. 您可以通过为每个按钮添加ui:'round'
来确保按钮看起来圆滑 。 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. 我自己使用了它们,在移动应用程序中需要7个选项卡,而这些选项卡在横向和纵向模式下均无法安装。 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 :D
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.