Custom icon in TabPanel fails

Question

I'm trying to add a custom icon to a TabPanel but when I do that it just shows a dark box with rounded corners.

My css looks like this: http://pastebin.org/447682

The code in the url is base64 for some random rss icon I found on the web. I also tried to add a relative url to an image but without any success.

If I change my code to use a base64 from the ext-touch.css file ( http://pastebin.org/447685 ) it works all fine, so why wouldn't it accept my 'custom' icon?

Note: I don't need an rss icon. I just tried that for testing purposes.

Answer 1

MrSoundless — I worked on the theming engine in Sencha Touch. The problem is that the bottom tabs use WebKit masks for icons, not traditional background images. This allows us to fill the shape of the icon you pass, so we can dynamically change its color on selection. To get a traditional image in there, use background-image instead of -webkit-mask-box-image. Base64 encoding as you are should still be fine.

Answer 2

for example in your .html file

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

and use the above defined image in your tabPanel

iconCls: 'image',

Answer 3

Although this question was asked in 2010, it still came up when I was searching for a solution. This functionality seems to have changed in Sencha 2.0, and I spent a while fighting it, so here is what is needed for 2.0 compatibility:

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 tab panel definition

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

Where XXXXX is the name of your custom icon.

Hope that helps.