icône personnalisée en TabPanel échoue

Question

Je suis en train d'ajouter une icône personnalisée à un TabPanel mais quand je le fais, il montre juste une boîte noire 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 aussi essayé d'ajouter une URL par rapport à une image, mais sans 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 ne pas accepter mon icône personnalisée?

Note: Je ne ai pas besoin d'une icône RSS. Je viens essayé à des fins de test.

Answer 1

MrSoundless - je travaillais sur le moteur de thématisation dans Sencha Touch. Le problème est que les onglets en bas utilisent des masques de WebKit pour les icônes, pas des images d'arrière-plan traditionnel. Cela nous permet de remplir le forme de l'icône que vous passez, afin que nous puissions modifier dynamiquement sa couleur sur la sélection. Pour obtenir une image traditionnelle là-bas, utilisez background-image au lieu de -webkit-mask-box-image. Base64 que vous devriez toujours bien.

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 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 la compatibilité 2.0:

CSS / stylesheet 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 définition du panneau

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

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

L'espoir qui aide.