Prima di cominciare il nostro primo tutorial, consiglio di scaricare l’ultima realase della libreria http://extjs.com/download . Vi consiglio di scaricare l’ultima versione stabile, dopo aver scompattato il file potete curiosare nella cartella con gli esempi allegati.

Cominciamo subito…scarichiamo il codice di esempio

Il primo esempio, il cui codice lo potete scaricare dal seguente link, contiene quattro file: ExtStart.html, ExtStart.js, ExtStart.css e ajax-example.php.

  • Scompattate tutti e 4 i file in una sottocartella posizionata all’interno della cartella dove avete installato Ext (esempio, se Ext is installata in “C:\code\ext-2.0\,” create una nuova cartella sotto “ext-2.0\” chiamata “tutorial” es. “C:\code\ext-2.0\tutorial\“).
  • Fate doppio-click sul file ExtStart.html per eseguirlo nel browser, se tutto viene svolto correttamente si dovrebbe visualizzare un messaggio di conferma che ogni cosa è configurata correttamente. Se invece ottenete un errore JavaScript, allora provate a seguire le istruzioni presenti nella stessa pagina.

Adesso siete pronti per aprire il codice javascript del file ExtStart.js preferibilmente utilizzando un IDE editor, riporto il codice:

Ext.onReady(function() {
alert("Congratulations!You have Ext configured correctly!");
});

Ext.onReady è il primo metodo (funzione) che userete su ogni pagina. Questo metodo è chiamato automaticamente dopo che il DOM è stato caricato, garantendo così che ogni elemento della pagina a cui potete riferirvi è disponibile con gli script eseguiti. Potete cancellare il messaggio generato con la funzione alert() per aggiungere qualcosa di più utile!