Sencha Touch bottom bar icons not showing

2
votes

i'm having problems to see the bottom bar icons on a Sencha Touch app.

I'm using compass and scss to style the app. Actually, after a research i'm using the mixing:

@include pictos-iconmask('home');

to import the icons that are used in the tabbar.

The bar elements are defined i that way:

{ title: 'FAQ', iconCls: 'star' },

And seems to be well-defined, in Safari the inspector shows the -webkit-mask-image:theme_image("default", "pictos/home.png"); property but this is strikethrough. In Chrome the property doesn't appear, what could be the cause of that issue?

enter image description here

The attached image shows both scenarios, at the top Safari and the property that i mentioned. At bottom the bar without the "broken" placeholder that Safari shows.

I found a solution that increments the icons z-index property, but i tried this with no luck.

The workaround is like this: 

.x-tabbar > * {
  z-index: 999 !important;
}

Any help is appreciated!

EDIT 1: Someone have any idea?

1
cssextjssasssencha-touchsencha-touch-2
can you try to add the icon to a container. It seems it's not been loaded. Simply give the container a cls:"test" and in scss add .test:before{content'/e600'} (whatever the number for the icon in the content of the tab). – Dinkheller

1 Answers

1
votes

In Sencha Touch 2.4.x you need to do the following :

  1. Install Rub
  2. Compass
  3. Navigate into the app home folder (i.e. to the level of the index.html file)
  4. In Terminal run sencha app watch

  5. Open the resources/sass/app.scss and add the following code: 

    // This is different in 2.4.x. In earlier versions it was pictos-iconmask as you've indicated you tried in the question. 

@include icon('browser');

  6. Your tab panel item should have the iconCls set up like so: 

    {
    .....,
    title: 'Favorites',
    iconCls: 'heart'
}

Additional (Optional) Step:

  1. Sometimes the iconCls has been commented out in the framework (this has happened to me once before). In that case, go to AppName/touch/resources/themes/stylesheets/sencha-touch/base/mixins/_Class.scss

  2. Search in the file for a line of code that reads : 

    @else if ($name == "star") { @return "S"; }
  3. Uncomment the line if it's been commented.