icona personalizzata in TabPanel fallisce

Question

Sto cercando di aggiungere un'icona personalizzata a un TabPanel ma quando lo faccio, che si vede solo una scatola scuro con angoli arrotondati.

I miei sguardi css come questo: http://pastebin.org/447682

Il codice nella url è Base64 per alcuni rss casuale icona che ho trovato sul web. Ho anche provato ad aggiungere un URL relativo a un'immagine, ma senza alcun successo.

Se cambio il mio codice per utilizzare un Base64 dal file ext-touch.css ( http://pastebin.org / 447.685 ) che funziona tutto bene, quindi perché non sarebbe accettare la mia icona 'custom'?

Nota: Non ho bisogno di un'icona rss. Ho appena provato che a scopo di test.

Answer 1

MrSoundless - Ho lavorato sul motore dei temi in Sencha Touch. Il problema è che le linguette inferiori usano maschere WebKit per le icone, immagini di sfondo non tradizionali. Questo ci permette di riempire il forma dell'icona si passa, in modo che possiamo cambiare dinamicamente il colore della selezione. Per ottenere un'immagine tradizionale in là, uso background-image invece di -webkit-mask-box-image. La codifica Base64 come sei ancora dovrebbe andare bene.

Answer 2

per esempio nel file .html

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

e utilizzare l'immagine qui sopra definita nel tabpanel

iconCls: 'image',

Answer 3

Anche se questa domanda è stata posta nel 2010, è ancora venuto quando ero alla ricerca di una soluzione. Questa funzionalità sembra essere cambiato in Sencha 2.0, e ho trascorso un po 'di combatterla, ecco ciò che è necessario per la compatibilità 2.0:

CSS / inline foglio di stile

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

App.js definizione pannello a schede

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

dove xxxxx è il nome della vostra icona personalizzata.

La speranza che aiuta.