tabpanel

Mattepuffo's logo
Impostare le icone in Sencha TabPanel

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.

Mattepuffo's logo
Sencha Touch evento activeitemchange

Sencha Touch evento activeitemchange

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.

Mattepuffo's logo
Introduzione a Sencha touch

Introduzione a Sencha touch

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!