ExtJs (o qualunque altra libreria javascript) può essere usata in due modi diversi:

• usando poco codice html (per esempio un solo div) e aggiungendo i vari componenti direttamente in javascript
• in modo non intrusivo, ovvero definendo una normale pagina html e trasformando i vari componenti presenti nella pagina (campi di testo, combo, ...) in componenti ext

Il primo approccio è quello utilizzato solitamente in extJs, in questo tutorial vedremo invece un esempio di utilizzo non intrusivo di extJs per aggiungere la validazione lato client ad una form esistente.

L'ottimo libro Pro JavaScript Techniques spiega nei dettagli come usare correttamente il javascript in modo non intrusivo. Usando le tecniche spiegate una pagina web è visualizzabile anche se il browser ha javascript disabilitato, il codice javascript aggiunge funzionalità per migliorare l'usabilità.

Iniziamo a sviluppare un esempio pratico vedendo una semplice (forse anche troppo!) form html:

Questa form utilizza html standard, funziona su tutti i browser anche se javascript è disabilitato o non presente (quindi anche su cellulari o palmari con browser minimali). Con una singola istruzione javascript è possibile aggiungere la validazione lato client (clicca qui per l'esempio funzionante):

A questo punto la vecchia form si è trasformata in una form con componenti extJs con validazione lato client. Inserendo alcuni dati si può vedere che il nome e cognome sono obbligatori, la data di nascita, l'email e il cap devono essere scritti con la giusta sintassi e altre cose simili. Se sono presenti errori viene mostrato un alert quando si cerca di fare il submit della form.

Le validazioni da effettuare su ogni campo sono specificate tramite classi css aggiunte ai campi html input della form. Le classi disponibili corrispondenti a componenti extJs sono:

• e-text: input text per inserire un testo generico. E' possibile specificare il tipo di dato inseribile usando le classi e-type-email, e-type-url, e-type-alpha, e-type-alphanum
• e-number: input text per inserire un numero, è possibile impedire l'inserimento dei decimali usando e-notAllowDecimals
• e-date: input text per inserire una data con l'aiuto di un popup con il calendario
• e-combo: combo box con autocompletamento lato client, se viene aggiunto e-remove-first-line la prima opzione viene rimossa in automatico in modo che non possa essere selezionata
• e-text-area: text area in cui è possibile inserire codice html con una interfaccia tipo editor di testo

Altre classi utilizzabili su tutti i componenti sono:

• e-required: indica che il campo è obbligtorio
• e-min-length-{n} e e-max-length-{n}: lunghezza minima e massima inseribile
• e-min-value-{v} e e-max-value-{v}: valore minimo e massimo inseribile, utilizzabile per numeri e date
• e-validator-{f}: nome della function javascript da richiamare per validare i dati. Prende in input il dato da validare e ritorna true se il dato è valido o un messaggio di errore se il dato non è valido

Ovviamente per un campo di input possono essere usate più classi css, un esempio è il campo nome della form vista:

<input 
	type="text" name="nome" 
	class="e-text e-required e-min-length-3 e-max-length-20 e-validator-validaNome"
>

Dopo aver aggiunto le classi css rimane solamente da includere i css e il javascript di estJs (per esempio sfruttando il servizio offerto da cachefile.net):

<link 
	rel="stylesheet" type="text/css" 
	href="http://www.cachefile.net/scripts/ext/2.0.1/resources/css/ext-all.css" 
/>
<script 
	type='text/javascript' 
	src='http://www.cachefile.net/scripts/ext/2.0.1/adapter/ext/ext-base.js' 
/>
<script 
	type='text/javascript' 
	src='http://www.cachefile.net/scripts/ext/2.0.1/ext-all.js' 
/>
<script 
	type='text/javascript' 
	src='http://www.cachefile.net/scripts/ext/2.0.1/source/locale/ext-lang-it.js' 
/>

E il javascript che aggiunge la validazione (può essere scaricato da qui) in cui si specifica la form a cui aggiungere la validazione:

<script src="extValidationBlog2j.js"/>
<script>
//aggiungo la validazione specificando un id
blog2j.addExtValidation(Ext.get('id_form'));
//oppure aggiungo la validazione a tutte le form presenti
Ext.select('form').each(blog2j.addExtValidation);
</script>

Il metodo addExtValidation si occupa di aggiungere la validazione alla form passata in base alle classi css presenti. In pratica cerca tutti gli input html all'interno della form che hanno una certa classe con il metodo select di extJs che ritorna tutti gli elementi del dom della pagina di un certo tipo con una certa classe. Per ogni elemento trovato crea un componente extJs aggiungendo le varie validazioni. Infine aggiunge una function javascript sull'evento onsubmit della form per controllare che tutti i campi siano validi e nel caso in cui non lo siano impedire il submit del form.