TabPanel中的自定義圖標失敗

我想向TabPanel添加一個自定義圖標，但是當我這樣做時，它只是顯示一個帶圓角的黑盒子。TabPanel中的自定義圖標失敗

在URL中的代碼是一些隨機的RSS圖標，我在網上找到的base64。我也嘗試添加一個相對的網址到圖片，但沒有任何成功。

如果我更改我的代碼以使用ext-touch.css文件（http://pastebin.org/447685）中的base64，它工作正常，爲什麼它不接受我的「自定義」圖標？

注意：我不需要rss圖標。我只是爲了測試目的而嘗試過。

2010-08-04 MrSoundless

MrSoundless - 我在Sencha Touch的主題引擎上工作。問題在於底部的選項卡使用WebKit掩碼來顯示圖標，而不是傳統的背景圖像。這使我們能夠填充您傳遞的圖標的形狀，因此我們可以在選擇時動態更改其顏色。要獲得傳統圖像，請使用background-image而不是-webkit-mask-box-image。 Base64編碼，你應該仍然很好。

來源

2010-08-07 18:41:00

謝謝，這似乎工作，除了當選擇器在圖像上時，它隱藏了完整的圖像，而不是'通過'發光' – MrSoundless 2010-08-13 07:28:35

對不起，你可以澄清一點評論？我以爲我們正在討論在img上使用選擇器。 – 2010-08-14 00:13:08

例如在您的.html文件

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

，並使用上述定義的圖像在你的TabPanel

iconCls: 'image',

來源

2012-02-27 11:30:30 Nag

雖然這個問題被問在2010年，它仍然來到了，當我搜索尋求解決方案。這個功能似乎煎茶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-08 20:18:25 tonycoupland

TabPanel中的自定義圖標失敗

回答

相關問題