L'icône personnalisée dans TabPanel échoue

Question

J'essaie d'ajouter une icône personnalisée à un TabPanel mais quand je fais cela, il montre juste une boîte sombre avec des coins arrondis.

Mon css ressemble à ceci: http://pastebin.org/447682

Le code dans l'URL est base64 pour une icône rss aléatoire j'ai trouvé sur le web. J'ai également essayé d'ajouter une URL relative à une image mais sans aucun succès.

Si je change mon code pour utiliser un base64 du fichier ext-touch.css (http://pastebin.org/447685) cela fonctionne très bien, alors pourquoi n'accepterait-il pas mon icône 'custom'?

Remarque: Je n'ai pas besoin d'une icône rss. J'ai juste essayé cela à des fins de test.

Answer 1

MrSoundless - J'ai travaillé sur le moteur thématique de Sencha Touch. Le problème est que les onglets du bas utilisent des masques WebKit pour les icônes, pas les images d'arrière-plan traditionnelles. Cela nous permet de remplir la forme de l'icône que vous passez, afin que nous puissions changer dynamiquement sa couleur lors de la sélection. Pour obtenir une image traditionnelle, utilisez background-image au lieu de -webkit-mask-box-image. L'encodage Base64 comme vous êtes devrait toujours être bon.

Answer 2

par exemple dans votre fichier .html

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

et utiliser l'image définie ci-dessus dans votre TabPanel

iconCls: 'image', 

Answer 3

Bien que cette question a été posée en 2010, il est venu encore quand je cherchais pour une solution. Cette fonctionnalité semble avoir changé dans Sencha 2.0, et j'ai passé un certain temps la combattre, alors voici ce qui est nécessaire pour 2.0 Compatibilité:

feuille de style CSS/en ligne

.x-tab .x-button-icon.XXXXX, 
.x-button .x-button-icon.x-icon-mask.XXXXX { 
    -webkit-mask-image: url('/img/1.png'); 
} 

app.js onglet définition panneau

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

Où XXXXX est le nom de votre icône personnalisée.

Espérons que ça aide.