Impostare le icone in Sencha TabPanel

Sencha TabPanel permette di impostare le icone alle varie voci che si impostano.

Di default ce ne stanno parecchie da usare, e le trovate in /resources/themes/images/default/pictos/.

Solo alcune però sono già inserite nel CSS (fatto con SASS se non sbaglio) e quindi può che ne impostiate alcune senza poi visualizzarla.

Ad esempio ho messo questa in un FormPanel ma non compariva:

iconCls: 'chat'

Per usare anche le altre icone bisogna fare una modifica al CSS; io vi consiglio di creare un CSS a parte e poi richiamarlo nell'index.

La regola da impostare è qualcosa tipo questa:

.x-tab .x-button-icon.contatti,
.x-button .x-button-icon.x-icon-mask.contatti {
    -webkit-mask-image: url('../js/sencha21/resources/themes/images/default/pictos/chat.png');
}

A questo punto dobbiamo richiamare questa regola:

iconCls: 'contatti'

E tutto dovrebbe funzionare.

Per le altre icone vi basterà creare altre regole.