ExtJs: ComboBox – Autocomplete Google Style

In questo articolo descriveremo metodi e proprietà di configurazione della classe Ext.Form.ComboBox,
sfruttando le potenzialità dell'oggetto con lo scopo di ottenere un widget Autocomplete che fornisca
dei suggerimenti in automatico in base al testo da inserire in un campo input. 
L'esempio classico di questa funzionalità è il campo di ricerca di Google, che sfrutta una logica sulla quale
baseremo la nostra applicazione.

Durante la progettazione di un'applicazione RIA per gestire le quotidiane operazioni CRUD su database, 
dovremmo senza dubbio fornire all'utente uno strumento non solo Cross-Browser, ma anche graficamente accativante.
Con l'avvento del web 2.0 è necessario puntare sulla semplicità e accessibilità.

Prima d'iniziare, è opportuno fare alcuni riferimenti a concetti fondamentali della libreria ExtJs: 
uno su tutti è lo store, un magazzino di dati indicizzati visualizzabile solamente dopo il rendering dell'oggetto.

Possiamo considerare lo store il cuore della ComboBox, alimentato dinamicamente lato server,
soluzione efficiente in caso di accesso a tabelle con elevata mole di dati, o semplicemente definito in client-side,
adatto per un numero limitato di opzioni.

var Store = new Ext.data.JsonStore({
	    data : [
    		["01", "Rossi Stefano"],  ["02", "Bianchi Luca"], ["03", "Verdi Giuseppe"]  //Insieme di coppie nome/valore
	    ],
    	fields : ["id", "name"]  //Identifico I dati all'interno della struttura
    });

è facile intuire come l'esempio qui sopra descriva un deposito dati statico.

Integriamo ora la struttura appena vista nella definizione
della ComboBox client-side su cui stiamo lavorando, tenendo conto di
fondamentali proprietà per ottimizzare al massimo l'efficienza di questa
classe. Un quadro completo su metodi ed eventi è possibile consultarlo nelle API di ExtJs, 
oggi invece ci limiteremo a studiare le parti fondamentali in modo da terminare lo sviluppo del nostro progetto.

//Creazione dell'istanza ComboBox
    var combo = new Ext.form.ComboBox({
        id: 'cmbRicerca',
        width: 400,
        x: 30,
        y: 50,
        emptyText: 'Ricerca...',
        fieldLabel: 'Descrizione Anagrafica',
        hideTrigger: true,
        minChars: '1',
        triggerAction: 'all',
        typeAhead: true,
        editable: true,
        mode: 'remote',
        displayField: 'name',
        valueField: 'id',
        store:  new Ext.data.JsonStore({
            url: 'retriveStore.php,
            root: 'rootStore',
            fields: ['id','name']
        })
    });

Termine	Descrizione
id	identificativo univoco per accedere al componente
width	dimensione orizzontale in pixel
x, y	coordinate asse ascisse/ordinate (posizionamento della combo nel layout)
emptyText	testo di default nella combobox prima che prenda il focus
fieldLabel	etichetta descrittiva
hideTrigger	pari a "true" per nascondere il "grilletto" della combo ed ottenere visivamente un textfield
minChars	numeri minimo di caratteri che l'utente deve digitare prima che venga attivata la richiesta al server per il load dello store
triggerAction	pari a "all" per eseguire query su tutti i dati
typeAhead	è "true" per popolare in autocomplete il resto del testo
editable	rende la combobox un input text editabile
mode	pari a "remote" per il caricamento automatico dello store da server-side

Le proprietà displayField e valueField sono il fulcro del
collegamento tra l'oggetto ComboBox e lo store dei dati. Durante la creazione dello store in
server-side attraverso una richiesta definita nella url,
costruiremo un array di coppie nome=valore in nesso alla configurazione fields e non dimentichiamo il punto di accesso (root).
Di conseguenza le stesse specifiche determinano quale valore venga visualizzato nella ComboBox (displayField)
e quale dei due valori viaggi nelle richieste http (valueField) da utilizzare,
per esempio, come parametro di ricerca sul db.

A questo punto non resta altro che eliminare la scritta "loading"
che appare ogni volta digitiamo un carattere nella ComboBox, attraverso
l'utilizzo di questa override:

Ext.override(Ext.form.ComboBox, {
    	onBeforeLoad:  function() { this.selectedIndex = -1; }
    });

un effetto grafico accettabile per una combobox statica in cui la
scelta è limitata visualizzando tutte le opzioni alla prima richiesta.
Questo è il risultato ottenuto.

Consigliamo di ottimizzare al massimo i tempi di risposta
per evitare ritardi di elaborazione che influiscono sul risultato visivo
desiderato, senza inviare più richieste non significanti al server e
ottimizzando le query da lanciare sul database. L'utlizzo di FireBug è
in grado di fornire tutte queste informazioni in modo da migliorare la nostra applicazione.