Question

我正在尝试向TabPanel添加自定义图标，但是当我这样做时，它只会显示一个带圆角的暗盒。

我在网上找到的一些随机rss图标中的url代码是base64。我还尝试为图像添加相对URL但没有任何成功。

如果我将代码更改为使用ext-touch.css文件（http://pastebin.org/447685）中的base64，它可以正常工作，那为什么不接受我的“自定义”图标？

注意：我不需要rss图标。我只是为了测试目的而尝试过。

Answer 1

MrSoundless - 我参与了Sencha Touch的主题引擎。问题是底部选项卡使用WebKit蒙版用于图标，而不是传统的背景图像。这允许我们填充您传递的图标的形状，这样我们就可以在选择时动态更改其颜色。要在其中获取传统图像，请使用background-image代替-webkit-mask-box-image。你仍然可以使用Base64编码。

Answer 2

例如在.html文件中

 .image{
-webkit-mask-box-image: url('/public/images/btn.png');
}

并在tabPanel中使用上面定义的图像

iconCls: 'image',

Answer 3

尽管2010年提出了这个问题，但在我寻找解决方案时仍然会出现这个问题。这个功能在Sencha 2.0中似乎已经改变了，我花了一段时间来对抗它，所以这里是2.0兼容性所需要的：

CSS /内联样式表

.x-tab .x-button-icon.XXXXX,
.x-button .x-button-icon.x-icon-mask.XXXXX {
  -webkit-mask-image: url('/img/1.png');
}

App.js标签面板定义

{
    title: 'Your tab title',
    iconCls: 'XXXXX'
}

XXXXX是自定义图标的名称。

希望有所帮助。

TabPanel中的自定义图标失败

3 个答案: