1

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

我的 CSS 看起来像这样： http: //pastebin.org/447682

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

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

注意：我不需要 rss 图标。我只是出于测试目的尝试过。

4

3 回答 3

3

MrSoundless——我在 Sencha Touch 的主题引擎上工作。问题是底部选项卡使用 WebKit 掩码作为图标，而不是传统的背景图像。这允许我们填充您传递的图标的形状，因此我们可以在选择时动态更改其颜色。要在其中获得传统图像，请使用background-image而不是-webkit-mask-box-image. 像你一样的 Base64 编码应该仍然没问题。

于 2010-08-07T18:41:00.433 回答
0

例如在您的 .html 文件中

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

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

iconCls: 'image',
于 2012-02-27T11:30:30.563 回答
0

虽然这个问题是在 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 是您的自定义图标的名称。

希望有帮助。

于 2012-03-08T20:18:25.840 回答