View Full Version : Shows only blank icon

17 Mar 2011, 8:56 AM

I have a tabpanel at the bottom of the page with 5 icons.
When I was using the default Sencha Touch theme it showed the icons as it should be.

But since I am using a theme made by myself it shows for every icon the blank icon.

This is my Sencha Touch code

glossOnIcon: false,
onReady: function() {

var home = new Ext.TabPanel({
title: 'Home',
iconCls: 'home',


var map = new Ext.Panel({
title: 'Map',
iconCls: 'maps',

var categories = new Ext.Panel({
title: 'Categories ',
iconCls: 'organize',
items: [


var mainPanel = new Ext.TabPanel({
fullscreen: true,
tabBarDock: 'bottom',
layout: 'card',
cardSwitchAnimation: {type: 'slide'}
items: [home, map, categories]



And this is the SCSS

$base-color: #039;
$page-bg-color: #fff;

$include-default-icons: false;

@import 'C:\wamp\www\SenchaTouchApp\MijnVoordeeel\lib\sencha-touch\resources\themes\stylesheets\sencha-touch\default\all';
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-toolbar-forms;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-carousel;
@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-form;
@include sencha-loading-spinner;

@include pictos-iconmask('search');
@include pictos-iconmask('home');
@include pictos-iconmask('organize');

What am I doing wrong?


18 Mar 2011, 3:58 AM

I also have the same problem, anyone?

20 Mar 2011, 4:47 AM

20 Mar 2011, 4:59 PM
Hmm, you have several errors in your Sencha js code (missing commas, extra commas, etc.)--don't know if they are contributing to the issue, but might want to address those.

Did you look at the source of the CSS file you're including? Did the compilation of the SCSS to CSS complete successfully, and does the new CSS file have the correct base64 data urls of the image masks (you can use Chrome's web developer tools to determine this pretty easily)? If you can post a link to the live code, that would be helpful.

21 Mar 2011, 3:41 AM

Thanks for your reply.

I'm sorry for those extra comma's, I just deleted some lines of code (to make my code here a bit more simple) and forgot to delete those comma's

You can see the code live here

The compilation of the SCSS code was sucesfull.

And this is the code of Home icon. (it shows the blank icon)

<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="home" id="ext-gen1022">

.x-tab img.home, .x-button img.x-icon-mask.home {
-webkit-mask-image: theme_image("default", "pictos/home.png");

21 Mar 2011, 2:20 PM
Can you post your config.rb and config_init.rb? It looks like perhaps the resources/themes/lib/theme_images.rb file isn't being found. I commented out the require File.join(dir, 'lib', 'theme_images.rb') directive in config_init.rb, and came up with exactly the same result for -webkit-mask-image that you have.

22 Mar 2011, 12:41 AM
I don't have a config_init.rb. For the config.rb I followed this tutorial.

In this config.rb I don't see the code

require File.join(dir, 'lib', 'theme_images.rb')

What should be in this config_init.rb? Where can I find more information about this file?

22 Apr 2011, 6:26 AM
I struggled with the same problem but I fixed it.

The problem is in the config.rb file, the sencha touch framework points to the wrong folder.

Default setting:

# Load the sencha-touch framework
load File.join(sass_path, '..', '..', '..', '..', 'resources', 'themes')

I copied the resources folder from the sencha touch framework and put it in same folder as m scss folder. (To identify the problem, I know it's not the perfect place).

So I have my config.rb and application.scss in dirX/scss/........ and the resources folder and all it's content in dirX/resources/............

So to get my particular setup to work, I needed to modify the path to:

# Load the sencha-touch framework
load File.join(sass_path, '..', 'resources', 'themes')

Because my config.rb needs to go one directory up (back) from the sass_path, and then the default resources/themes path.

The '..' is to go a folder up.

Let me know if it helped. Makes me happy ;)

22 Apr 2011, 8:07 AM
Thank you, you've made me happy :). It finally works.

31 Aug 2011, 8:45 PM
GeradW...... you my friend, are a lifesaver... been bashing my head against that for 3 hours!!!