Benutzerdefinierte Symbol in TabPanel schlägt fehl

Question

Ich versuche, ein benutzerdefiniertes Symbol zu einem TabPanel hinzufügen, aber wenn ich das es zeigt nur eine dunkele Box mit abgerundeten Ecken.

Meine CSS sieht wie folgt aus: http://pastebin.org/447682

Der Code in der URL ist base64 für einige zufällige RSS-Symbol ich im Web gefunden. Ich habe auch versucht, eine relative URL zu einem Bild hinzuzufügen, aber ohne Erfolg.

Wenn ich den Code ändern Base64 von der ext-touch.css-Datei zu verwenden ( http://pastebin.org / 447.685 ) alles funktioniert gut, also warum sollte mein ‚custom‘ Symbol nicht akzeptieren?

Hinweis: Ich habe nicht ein RSS-Symbol benötigen. Ich habe gerade versucht, dass für Testzwecke.

Answer 1

MrSoundless - ich arbeitete an der Thematisierung Motor in Sencha Touch. Das Problem ist, dass die unteren Laschen WebKit Masken für Symbole verwenden, nicht traditionelle Hintergrundbilder. Dies ermöglicht es uns, die Form des Symbols Sie passieren zu füllen, so dass wir dynamisch seine Farbe auf Auswahl ändern. Um ein traditionelles Bild in dort Verwendung background-image statt -webkit-mask-box-image zu bekommen. Base64 codiert, wie Sie sind immer noch in Ordnung sein sollte.

Answer 2

zum Beispiel in der HTML-Datei

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

und verwenden Sie das oben definierte Bild in Ihrem TabPanel

iconCls: 'image',

Answer 3

Obwohl diese Frage im Jahr 2010 gefragt wurde, kam es noch, wenn ich nach einer Lösung gesucht. Diese Funktionalität scheint in Sencha 2.0 geändert zu haben, und ich verbrachte eine Weile es zu kämpfen, so ist hier, was für 2.0-Kompatibilität benötigt wird:

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 Registerkarte Panel Definition

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

Wo XXXXX der Name Ihres benutzerdefinierten Symbols ist.

Ich hoffe, das hilft.