Пользовательский значок в TabPanel не работает

Question

Я пытаюсь добавить пользовательский значок в TabPanel, но когда я делаю это, он просто показывает темный прямоугольник с закругленными углами.

Мой CSS выглядит так: http://pastebin.org/447682

Код в URL-адресе - base64 для некоторой случайной иконки rss, которую я нашел в Интернете. Я также попытался добавить относительный URL к изображению, но безуспешно.

Если я изменю свой код на использование base64 из файла ext-touch.css (http://pastebin.org/447685), он будет работать нормально, так почему бы ему не принять мой «пользовательский» значок?

Примечание: мне не нужна иконка rss. Я только что попробовал это в целях тестирования.

Answer 1

MrSoundless - я работал на движке тем в Sencha Touch. Проблема состоит в том, что нижние вкладки используют маски WebKit для иконок, а не традиционные фоновые изображения. Это позволяет нам заполнить форму значка, который вы передаете, чтобы мы могли динамически изменять его цвет при выделении. Чтобы получить традиционное изображение, используйте background-image вместо -webkit-mask-box-image. Кодировка Base64 должна быть в порядке.

Answer 2

Хотя этот вопрос был задан в 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 - имя вашей пользовательской иконки.

Надеюсь, это поможет.

Answer 3

например в вашем .html файле

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

и используйте указанное выше изображение в вашей вкладке

iconCls: 'image',