Scarichiamo la libreria Ext dal sito ufficiale. Decomprimiamo in una cartella 'ext' e creiamo una cartella 'home_a_schede' allo stesso livello. Inseriamo un file di nome home.html e una cartella js che conterrà in nostri file javascript. Dentro a quest'ultima creiamo un file di nome esempio.js e, giunti a questo punto, apriamo i nostri file con un editor di testo dove scriveremo il codice della nostra home a tab. Facciamo attenzione in particolare alle poche righe che di volta in volta evidenzieremo.

Il file home.html conterrà pochissime righe. Il necessario per poter far funzionare la libreria Ext e un tag div chiamato content, che utilizzeremo come contenitore della nostra homepage grazie al javascript contenuto in esempio.js . Così facendo, gran parte del lavoro è già svolto da Ext. Pertanto, aver incluso la terna: ext-all.css, ext-base.js, ext-all.js; ci aiuta ad impostare la nostra pagina perché possa usare a pieno le potenzialità del framework.

<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>

<div id="content"></div>

Nelle ultime righe del nostro codice HTML abbiamo istruito il browser perché vada a leggere il codice javascript che si trova nella pagina esempio.js. Il codice che andremo a scrivere è molto semplice. Ext funziona cosi', con una variabile che ne contiene un'altra, che ne contiene un'altra ancora. Come una pagina che contiene periodi, che contengono frasi, che contengono parole. Ecco quindi che vediamo la variabile tabs che contiene un pannello adatto a mostrare ogni suo elemento come un tab/scheda. Dentro a tabs abbiamo items, e dentro ad items troviamo i tre tab e i relativi codici html.

var tabs = new Ext.TabPanel({
region: 'center',
activeTab: 0,
defaults:{autoScroll:true},
frame:true,
items:[
{
 title: 'Presentazione',
 frame:true,
 html: 'In questa pagina posso'+
  'elencare i miei interessi e presentarmi'
},{
 title: 'Le mie foto',
 frame:true,
 html: '<div>Qui si possono mettere '+
  'alcune foto o uno script per una gallery</div>' 
},{
 title: 'I miei contatti',
 frame:true,
 html: '<div>Qui si possono elencare '+
  'tutti i propri contatti</div>' 
}]
});

Il risultato è una homepage creata in pochi minuti, tre tab e una barra mobile per le news completamente crossbrowser.