Blog

Ext JS 5 Tutorial #01 – Grid, Window, Form

In un articolo precedente ho scritto di Sencha Ext JS, indicando come ultima versione stabile la 4.2.1.

Da circa un mese, però, è disponibile la versione Beta Ext JS 5.0.0, che introduce diverse novità.

Colgo quindi l’occasione per scrivere un tutorial su come iniziare ad utilizzare questo splendido framework nella sua ultima versione.

Obiettivo di questa prima guida è quello di mostrare come creare una semplice Rubrica nella quale inserire una lista di utenti, completa di Nome, Cognome, Indirizzo e Numero Telefonico.

Prerequisiti
Per raggiungere lo scopo ci serve un Database MySQL nel quale creare una tabella Utenti, un web server su cui far girare il programma scritto in Ext JS e una conoscenza base di PHP, HTML e Javascript.

Se vi serve aiuto, potete leggere questo breve tutorial, che spiega come installare un web server in locale, sul proprio computer Windows, Mac o Linux.

In questo esempio ci serviremo del file javascript di Ext JS 5.0.0 hostato sul sito del produttore:

http://dev.sencha.com/ext/5.0.0/examples/shared/include-ext.js

Nulla vi vieta comunque di scaricare ed installare la libreria in locale, se preferite.

Il programma Ext JS è un semplice file Javascript (pgm01.js) da includere nella pagina rubrica.html.

Creiamo insieme la pagina in questione, predisponendola per il framework (potrete usare questo file come template anche per esercizi successivi).

rubrica.html

Come è possibile notare, questo file contiene pochissimo codice HTML, necessario solamente ad includere i files Javascript e a posizionare gli elementi del programma.

Dopodichè inseriamo il codice Javascript Ext JS per creare la Grid che conterrà la lista degli utenti. Questa griglia avrà cinque colonne (Id, Nome, Cognome, Indirizzo, Telefono), la prima delle quali nascosta.

Inoltre, nella zona inferiore, saranno presenti tre bottoni, necessari all’inserimento, modifica e cancellazione degli utenti.

Vediamo il codice iniziale del programma:

pgm01.js

Queste poche righe di codice sono sufficienti a creare la Grid, per il momento ancora vuota, ma già completa di Titolo, Colonne (sortabili, nascondibili e riordinabili) e di Bottoni:

sej5_t01_i01

sej5_t01_i02

Ora dobbiamo gestire il contenuto della Grid.

Per fare ciò, serve creare un database di prova, che chiameremo “test“:

Al suo interno va ora creata la tabella “rubrica“, con i relativi campi:

Dopodichè inseriamo qualche record di prova:

Ora non ci resta che visualizzare il contenuto della nostra tabella “rubrica” all’interno della Grid (gridRubrica).

Per fare ciò modifichiamo il codice del nostro programma che diventa:

pgm01.js

Come è facile intuire, adesso ci serve creare il file storeRubrica.php che legge il contenuto della tabella e lo consegna in formato JSON al programma.

Creiamo un piccolo file PHP di connessione al database, da utilizzare anche per gli esercizi futuri:

connessione.php

dopodichè includiamolo nel file dello store e scriviamo la query per estrarre gli utenti:

storeRubrica.php

Ricarichiamo rubrica.html ed il risultato sarà il seguente:

extjs5_t01_img03

Possiamo cliccare sull’intestazione delle varie colonne per sortare il contenuto della Grid, oppure nascondere o riordinare tramite drag&drop le colonne stesse.

Pensiamo a quante righe di HTML avremmo dovuto scrivere per ottenere un risultato analogo!

Ora dobbiamo gestire l’inserimento, la modifica e la cancellazione di utenti all’interno della Rubrica.

Sebbene ci siano diversi metodi per farlo, in questo caso utilizzeremo quello del data entry tramite form dentro una popup: selezionando un record e cliccando su “Modifica Utente“, si aprirà una Window contenente una Form con i dati relativi all’utente selezionato. Potremo variare alcuni di essi ed aggiornare il record. Analogamente, potremo cliccare su “Nuovo Utente” per inserirne uno nuovo oppure su “Elimina Utente” per cancellarne uno esistente.

Per ogni bottone va specificato un handler, cioè una funzione Javascript che il programma richiamerà ad ogni click del bottone stesso.

Poi occorre che i bottoni di modifica e cancellazione siano attivi solo quando un utente della Grid viene selezionato:

Queste due porzioni di codice appena mostrate, vanno a completare la dichiarazione dell’oggetto Grid, che adesso è:

Occupiamoci adesso di cosa scrivere all’interno delle tre funzioni (nuovoUtente, modificaUtente e eliminaUtente).

Nei primi due casi (nuovo e modifica), devo comunque aprire una popup contenente la form con i campi da compilare. Se sono in modifica, la form sarà precompilata con i valori letti dal record selezionato nella Grid:

In entrambi i casi chiamo la funzione “utente()“:

Il codice appena scritto mi consente già di aprire la Window al click sul bottone “Nuovo Utente” o “Modifica Utente“:

extjs5_t01_img04

extjs5_t01_img05

Cliccando su “Annulla” viene chiusa la popup. Premendo invece il bottone “Salva“, viene richiamata la funzione “winUtente_salva()“:

Ecco qualche messaggio di errore gestito dal programma:

extjs5_t01_i6

extjs5_t01_i7

Vediamo ora il contenuto del file PHP che viene chiamato al submit della Form:

formUtenteSubmit.php

Ora possiamo inserire un nuovo utente:

extjs5_t1_i8

extjs5_t1_i9

 

(Continua…)

  • Complimenti per l’articolo. Mi sto avvicinando da poco ad extjs, e ho trovato te, che finalmente spieghi chiaramente come interfacciarsi a php/mysql.
    Attendo fiducioso la continuazione. 🙂

    • Ciao e grazie! Le modalità di interfacciamento con un linguaggio lato server (ad esempio PHP) sono uno dei punti deboli della documentazione ufficiale di Sencha. Appena possibile terminerò il tutorial. Stay tuned! 😉

  • Zarco Darkson

    Ciao,
    ti ringrazio per l’articolo (grazie al quale sono finalmente riuscito a connettere una grid al db MySQL).

    Detto questo:
    manca la funzione eliminaUtente(), senza la quale il codice si inchioda.
    L’hai fatto apposta per esortare i lettori ad usare il cervello senza poter fare un mero copia+incolla o è una semplice svista?

    Una cosa a latere:
    se in php.ini è settato display_errors = On storeRubrica non funziona, perchè ritorna mysql_connect(): The mysql extension is deprecated… prima del “vero” JSon.

    • Ciao Zarco, grazie per il feedback! Come hai giustamente notato, il tutorial è incompleto, per mancanza di tempo. Verificherò ASAP il warning che mi hai segnalato. Se hai domande chiedi pure!

  • Luca Bottoni

    Ciao,
    articolo bello, però oggi dopo 15 giorni di studio di Ext sono ancora in pieno buio totale. A questo Framework gli riconosco la completezza, ma sulla semplicità devo dire che è uno dei peggiori mai visti in 12 anni. Le stesse cose fatte con altri framework richiedono sicuramente meno tempo (almeno in fase di start ) e non ti dico il debug con FF e chrome che disatro sia!!

    Tu che hai già esperienza, come sei riuscito a bloccarti nel suo utilizzo?
    io sto cercando di lavorare su una app ereditatà e devo dire che mai in tanti anni ho trovato così tanti problemi a iniziare, partendo dalla stessa docuemntazione che se cerchi qualcosa che è ereditato diventa una caccia al tesoro 😀

  • Alessio Calvio

    Davvero chiaro questo articolo finalmente, ne aspettiamo altri