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.

Il componente TabPanel di Sencha Touch è fornito di vari eventi.

Uno di questi è activeitemchange, attivato quando si cambia tab.

Usando questo evento possiamo identificare un tab preciso e attivare qualcosa.

Sencha touche è uno die vari framework disponibili per la creazione app mobile (compatibile solo con browser basati su Webkit come Safari e Chrome).

A mio avviso è anche una delle migliori, ma ha una curva di apprendimento abbastanza ripida in quanto non è basata su HTML, ma è Javascript-driven.

Questo vuol dire che tutta l'applicazione sarà scritta dentro un file js.

Iniziamo con lo scaricare il tutto da qua; io ho scaricato la versione Open Source.

Dopo di che creiamo una cartella js e mettiamo il tutto la dentro.

Dentro la cartella js creiamo anche un file app.js; questo sarà il file dove andremo a scrivere tutta l'applicazione.

Nella root creiamo un semplice file index.html con questa roba dentro:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <link rel="stylesheet" href="js/touch/resources/css/sencha-touch.css" type="text/css" />
        <script type="text/javascript" src="js/touch/sencha-touch-all-debug.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
    </head>
    <body>
    </body>
</html>

Come vedete questo file si limita a caricare il foglio di stile predefinito, la libreria sencha e il nostro file app.js.

Dentro al body non c'è nulla!