Пользовательская икона в Tabpanel не удается

Question

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

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

Код в URL является Base64 для некоторых случайных RSS Icon, который я нашел в Интернете. Я также пытался добавить относительный 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

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

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

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

iconCls: 'image',

Answer 3

Хотя этот вопрос был задан в 2010 году, он все еще придумал, когда я искал решение. Эта функциональность, кажется, изменилась в Sencha 2.0, и я провел некоторое время, так вот то, что нужно для совместимости 2.0:

CSS / inline stylesheet

.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 - это имя вашего пользовательского значка.

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