JavaScript  »  Articoli  »  Ext.js 

Come vedete questo è normalissimo codice JSON che Ext interpreta e rende in maniera piuttosto intuitiva. Andiamo a leggere quanto abbiamo descritto nell'oggetto tabs. La variabile tabs conterrà un pannello adatto a mostrare ogni suo elemento come una tab/scheda (Ext.TabPanel).

Questo contenitore di tab sarà posizionato nella regione centrale di un pannello che avrà un layout di tipo BorderLayout (analizzeremo nei prossimi articoli i layout). Abbiamo descritto i margini che dovrà mantenere tabs, nella pagina, e istruito il browser perché renderizzi la prima tab come attiva (activeTab:0).

Abbiamo descritto alcune caratteristiche grafiche delle nostre tab e poi abbiamo inserito direttamente nell'array items, le quattro schede e i relativi codici HTML, con layout 'fit', in modo che il contenuto della tab riempia tutta l'area a disposizione. Il risultato è il seguente.

Figura 1 - Screenshot dell'esempio

Concludendo

Abbiamo rispettato il nostro obiettivo e realizzato fin da subito qualcosa che va oltre i classici Hello World degli inizi. Nei prossimi articoli impareremo a applicare diversi temi e colori alle nostre applicazioni, a leggere le API e usare la localizzazione, a sfruttare al meglio la community, i plugin e gli extra e a progettare le nostre GUI come fino ad ora il web non ci aveva mai concesso di fare.

Altri articoli

Altre guide

Altre newsletter