JavaScript  »  Articoli  »  Ext.js 

In questo articolo della serie dedicata a Ext.js parleremo dei form, come si realizzano, come si usano e da cosa sono composti.

Elenco delle componenti di un form

Per iniziare a comprendere i form dobbiamo pensare a tutte le componenti che abbiamo utilizzato fino ad ora nei nostri moduli online e a come queste sono state tradotte in Ext. Oltre agli elementi comuni e a cui siamo stati abituati, Ext introduce dei campi innovativi (textarea con testo enriched o calendari per i campi data, etc) che ci permettono di non dover utilizzare funzioni o elementi esterni ad Ext per la validazione e di risparmiare quindi parecchio tempo nell’implementazione delle nostre pagine.

Abbiamo quindi:

Checkbox: checkbox di controllo unico campo. Può essere usato come una sostituzione diretta per la checkbox tradizionale.

CheckboxGroup: un gruppo che contiene diversi controlli Checkbox.

Combo Box: un controllo ComboBox con il supporto per autocomplete, remoto-loading, di paginazione e molte altre caratteristiche

DateField: prevede una data di ingresso con un Ext.DatePicker (un calendario) a discesa automatica e possibilità di validazione complessa della data.

FieldSet: contenitore standard utilizzato per il raggruppamento di più campi di un modulo.

Hidden: per inserire i nostri campi nascosti nel form.

HtmlEditor:  una textarea enriched con caratteristiche avanzate per la formattazione del testo, per la validazione e con possibilità di utilizzo di altri plugin Ext per l’inserimento di immagini e tabelle complesse.

NumberField: Un campo di testo numerico che fornisce un controllo automatico dei tasti che possono essere accettati e avanzati controlli di validazione.

Radio: il classico campo radio. Simile al controllo checkbox. Un RadioGroup è gestito automaticamente dal browser se si assegna a ciascun radio in un gruppo lo stesso nome.

Radio Group: un gruppo che contiene diversi controlli Radio.

TextArea: campo di testo multilinea. Può essere usato come una sostituzione diretta per i tradizionali campi di testo, in più aggiunge il supporto per auto-sizing.

TextField: campo di testo tradizionale. Può essere usato come una sostituzione diretta dei campi tradizionali o come classe di base per più sofisticati controlli di input (come Ext.form.TextArea e Ext.form.ComboBox).

TimeField: prevede un orario da inserire nel campo con una lista di tempi a discesa e controlli di validazione automatica di orari.

Validazioni e messaggistica

Analizzeremo insieme alcuni degli esempi rilasciati da Ext per la sezione Form e per i suoi controlli complessi. In tutti questi form vedremo come Ext riesca a farci dimenticare i vecchi controlli Javascript per validazione di date, numeri, presenza di un campo, lunghezza e quant’altro grazie ai meccanismi di validazione associati ad ogni form.

Ogni elemento può provvedere a validarsi da sé per via dei controlli onBlur. Se questi sono attivati, non appena il cursore abbandona (onBlur) il campo in questione si può vedere l’elemento contrassegnato da un simbolo di errore nel caso in cui il dato inserito non sia corretto.  Questa proprietà viene attivata dal campo booleano (true/false) validateOnBlur.

Altri articoli

Altre guide

Altre newsletter