Introduzione

Quello che andremo a vedere in questo articolo è come utilizzare la classe grid del framework Ext JS; questo framework è, forse, quello che ora sul mercato detiene il posto di miglior framework javascript per la creazione di interfacce web.
Se lo esplorate a fondo infatti vedrete che fornisce una miriade di possibilità, tutte legate alla creazione di interfacce e ciò che gli è connesso; possibilità di creare grafici, menu ad albero, tabelle, pannelli e molto molto altro ancora.

Per una visione più completa della cosa rimandiamo al sito ufficiale di Ext JS.

La curva di apprendimento di questo framework potrebbe risultare inizialmente molto alta; chi però ha confidenza con Java ne può cogliere subito moltissime similitudini che faranno sentire lo sviluppatore a proprio agio sin dall’inizio.

Ma adesso basta chiacchiere e andiamo a vedere cosa faremo in questo articolo.

In questo articolo ci interfacceremo con la classe Grid, creando due differenti esempi:

• Un primo esempio per creare una grid di base, senza possibilità di editare le celle della tabella, ma con molte proprietà interessanti, come l’ordinamento dei valori per ogni colonna, un layout di default inserito dal framework, ridimensionare colonne etc etc etc…
• Un secondo esempio permette di aggiungere alla prima grid la possibilità di editare le celle(casomai interagire con i nuovi valori inseriti inviandoli ad uno script server-side che si occuperà di memorizzarli in un DBMS) e aggiungeremo un file css personale per personalizzare lo stile delle tabelle.

Gli esempi e i download li vedete alla fine dell’articolo.
All’interno del materiale scaricabile dall’articolo è presente una cartella js contenente tutto ciò che riguarda ExtJS; i files realmente inclusi per portare a termini questi esempi li potete vedere all’interno dei file datagrid.html e datagrid-editabile.html.

Primo esempio- Datagrid

HTML

Il codice html di cui necessitiamo è rappresentato ovviamente dalle inclusioni dei files necessari:

<link rel="stylesheet" type="text/css" href="../js/ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../js/ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/ext-3.0.0/ext-all.js"></script>
<script type="text/javascript" src="../js/ext-3.0.0/src/locale/ext-lang-it.js"></script>

e oltre questo si deve solamente definire all’interno del body l’elemento che conterrà la nostra grid, ad esempio:

<div id="esempio-grid"></div>

Javascript

Il codice javascript necessario, inseribile all’interno di uno script definito nell’head del documento HTML, è il seguente:

Ext.onReady(function(){
// Array con i dati da visualizzare
var mieiDati = [
     [160056,'Quirino','Lo Russo','28/10/1986'],
     [343245,'Pippo','Pippi','12/04/1988'],
     [565648,'Franco','Franchi','18/07/1985'],
     [424467,'Paperino','Paperini','08/11/1984'],
     [097213,'Aaaaaa','BBB DDDD','23/03/1989']
];
// Creo lo store per i dati
var store = new Ext.data.ArrayStore({
     fields: [
           {name: 'Matricola', type: 'int'},
           {name: 'Nome'},
           {name: 'Cognome'},
           {name: 'dataNascita', type: 'date', dateFormat: 'g/m/Y'}
     ]
});
// Carico i dati
store.loadData(mieiDati);
var grid = new Ext.grid.GridPanel({
     store: store,
     columns: [
        {id:'matricola',header: 'Matricola', width: 160, sortable: true, dataIndex: 'Matricola'},
        {header: 'Nome', width: 120, sortable: true, dataIndex: 'Nome'},
        {header: 'Cognome', width: 120, sortable: true, dataIndex: 'Cognome'},
        {header: 'Data di nascita', width: 160, sortable: true, renderer: Ext.util.Format.dateRenderer('g/m/Y'), dataIndex: 'dataNascita'}
     ],
     stripeRows: true,
     autoExpandColumn: 'matricola',
     height: 160,
     width: 600,
     title: 'DataGrid',
     // config options for stateful behavior
     stateful: true,
     stateId: 'grid'
});
// render the grid to the specified div in the page
grid.render('esempio-grid');
})

Andiamo ad analizzare il codice javascript utilizzato:

• mieiDati: E’ un array che contiene i vari elementi da visualizzare all’interno della tabella.
  La tabella conterrà dunque cinque righe.
  Questi dati possono anche essere caricati tramite AJAX da un file esterno, casomai recuperando i valori da un DBMS; ovviamente tutto questo è sempre possibile grazie a ExtJS.
• store: Store è un elemento istanziato dalla classe data di Ext, e in particolare dalla classe ArrayStore(ne esistono anche altre utilizzabili a seconda delle necessità) .
  Praticamente tramite store possiamo informare Ext dei dati che andranno a comporre la nostra tabella; in questo caso infatti
  saranno presenti 4 campi( matricola, nome, cognome, data di nascita ) e inoltre per ogni campo possiamo fornire il tipo del dato che conterrà.
  Il tipo del dato è importante oltre che per i controlli che automaticamente Ext compie sulla correttezza dei dati, anche per un’eventuale modifica da compiere sulla cella della tabella; vedremo che nel prossimo esempio quando andiamo a modificare il campo data di nascita, specificato come tipo date, automaticamente Ext creerà un calendario che ci aiuta nella selezione del valore(questo perché riconosce che il campo è di tipo date).
• loadData:Tramite questo metodo, richiamabile su un oggetto di tipo Store(nel nostro caso ArrayStore), carichiamo i veri e propri valori all’interno della struttura della tabella.
• GridPanel: E’ la classe atta a creare la tabella.
• store: Qui và passato l’elemento store creato in precedenza(l’ArrayStore per capirci).
• columns: La definizione delle colonne della grid. Ogni colonna ha un header che rappresenta praticamente il nome visualizzato dalla colonna, una width e una height, sortable(booleano che stabilisce se la colonna si può ordinare) e  un dataIndex che rappresenta il binding con i dati dell’ArrayStore definito in precedenza.
• stripeRows: Un booleano che permette di creare righe con le strisce se impostato a true.
• height: Altezza della tabella
• width: Larghezza della tabella
• title: Il titolo della tabella
• stateId: L’id unico associato a questo componente, utilizzato per gestire funzioni dello stato
• stateful: Un booleano che dice al componente di provare a ricaricare(in fase di startup) lo stato delle proprietà interne  di uno stato salvato.
• render: E’ un metodo della classe Grid che permette di inserire la grid all’interno del DOM, e più precisamente all’interno dell’elemento passatogli come input.
• Oltre queste proprietà, utilizzate nell’esempio, ci sono molte alte proprietà settabili; per una guida completa vi rimandiamo alle API di Ext JS a consultare la classe Grid.Panel, utilizzata in questo esempio.

CSS

A livello css non è stato definito nessun file, nè aggiunta nessuna riga di codice; tutto il layout che vedete in questo esempio è quello che di default aggiunge ExtJS alle grid.

Esempio 2- Datagrid Editable

Questa volta, rispetto all’esempio precedente, introdurremo due nuove caratteristiche:

• Aggiungeremo al documento HTML un nostro file css per modificare il layout di default della grid
• Renderemo le celle della tabella editabili, e gli assoceremo degli eventi una volta completato l’edit e prima di effettuarlo(in modo da poter interagire con i valori della cella).

HTML

Il codice HTML è praticamente identico a quello dell’esempio precedente, fatta eccezione per l’aggiunta del file css che utilizzeremo per personalizzare la tabella. Dunque all’esempio precedente bisogna aggiungere la seguente inclusione:

<link rel="stylesheet" type="text/css" href="style.css" />

Javascript

Rimane identico il codice relativo ai dati che andranno a comporre la tabella(la variabile mieiDati), la definizione dell’ArrayStore(la variabile store) ed il caricamento dei dati all’interno dello store.

L’unica differenza che volevamo era rendere le celle della tabella editabili, e casomai scatenare qualche funzione appena completato l’edit(casomai per memorizzare i dati) oppure poco prima di iniziarlo(casomai per verificare la possibilità dell’edit di quel campo).

Per fare questo abbiamo bisogno della classe ColumnModel; praticamente all’esempio precedente definivamo le colonne direttamente all’interno della classe GridPanel, mentre quello che faremo questa volta è definire un modello di colonna personale, e successivamente assegneremo questo modello di colonna alla classe EditorGridPanel(invece che alla classe GridPanel utilizzata nell’esempio precedente) .

Andiamo a vedere il codice necessario per la definizione del nostro modello di colonna:

function formatDate(value){
    return value ? value.dateFormat('g/m/Y') : '';
}
// Column Model
var cm = new Ext.grid.ColumnModel({
    defaults: {
         sortable: true // ordinabile default
    },
    columns: [
    {
         id: 'matricola',
         header: 'Numero di Matricola',
         dataIndex: 'Matricola',
         align: 'center',
         width: 80,
         editor: new Ext.form.NumberField({
              allowBlank: false,
              allowNegative: false,
              maxValue: 999999
         })
    },{
         header: 'Nome',
         dataIndex: 'Nome',
         width: 200,
         align: 'right',
         editor: new Ext.form.TextField({
              allowBlank: false
         })
    },{
         header: 'Cognome',
         dataIndex: 'Cognome',
         width: 200,
         align: 'left',
         editor: new Ext.form.TextField({
              allowBlank: false
         })
    },{
         header: 'Data di nascita',
         dataIndex: 'dataNascita',
         width: 110,
         align: 'center',
         renderer: formatDate,
         editor: new Ext.form.DateField({
              format: 'g/m/Y',
              minValue: '01/01/1900'
         })
     }
     ]
});

Andiamo a vedere più in dettaglio:

• defaults: Qui è possibile settare i vari parimetri di default delle nostre colonne. Nel nostro caso abbiamo definito il parametro sortable pari a true in modo da renderle ordinabili dall’utente.
• columns: Praticamente è la definizione di colonne che abbiamo fatto nell’esempio precedente. Oltre questo, è presente il parametro editor che utilizziamo per definire il tipo del campo che sarà poi editabile(ad esempio abbiamo usato la classe NumberField nel caso della matircola , TextField nel caso del nome e del cognome e DateField nel caso della data ); all’interno della definizione dell’editor è possibile stabilire anche varie condizioni che questo campo deve soddisfare(ad esempio nel nostro caso abbiamo utilizzato maxValue: 999999 , etc etc…).
  Qualora queste condizioni non venissero soddisfatte ExtJS provvederà automaticamente a non validare la modifica appena effettuata e a ripristinare il vecchio valore del campo.

Andiamo adesso a vedere il codice relativo all’EditorGridPanel :

var grid = new Ext.grid.EditorGridPanel({
     store: store,
     cm:cm,
     stripeRows: true,
     autoExpandColumn: 'matricola',
     clicksToEdit: 2,
     height: 170,
     width: 700,
     title: 'Tabella Extjs',
     // config options for stateful behavior
     stateful: true,
     stateId: 'grid',
     listeners: {
          afteredit:function(editedObj){
               alert("Il valore iniziale era: "+editedObj.originalValue );
               alert("Il nuovo valore e': "+editedObj.value );
               alert("Stai modificando la colonna: "+editedObj.field );
               alert("Stai modificando la riga: "+(editedObj.row+1) );
          },
          beforeedit:function(){
               alert("Stai per modificare");
          }
     }
});
// render the grid to the specified div in the page
grid.render('esempio-grid');

Andiamo ad analizzare i parametri fondamentali:

• cm: Gli passiamo il modello di colonna creato.
• clicksToEdit: Il numero di click da effettuare sulla cella per editarla. Nel nostro caso è pari a 2.
• listeners: Qui vanno definite le varie funzioni da richiamare a determinati eventi scatenati con la grid, come afteredit e beforeedit, chiamati rispettivamente subito dopo e subito prima aver modificato una cella.

CSS

Come codice css abbiamo definito il file style.css che contiene alcune normalissime personalizzazioni della tabella, fatte a nostro piacimento per l’esempio.

Andiamo a vedere il contenuto di questo file:

#esempio-grid .x-grid-panel .x-grid3-hd-inner
{
font-weight: bold;
font-size: 13px;
border-right: 1px solid black;
}
#esempio-grid .x-grid-panel .x-grid3-cell-inner
{
padding-right: 5px;
padding-left: 5px;
cursor: pointer;
font-size: 11px;
}
#esempio-grid .x-grid-panel .x-grid3-cell-inner:hover
{
background: #c1d5f0;
font-weight: bold;
font-size: 12px;
}
#esempio-grid .x-grid-panel .x-grid3-row:hover
{
background: #d5e4f5;
}
#ext-gen3
{
font-size: 18px;
padding-bottom: 10px;
}

Conclusioni

Abbiamo dunque introdotto il framework Ext JS e alcune delle sue classi relative alla creazione di tabelle, editabili o meno.

In ExtJS, come già detto, è possibile creare completissime interfacce web, comprensive di tabelle, grafici a torta, istogrammi, finestre di popup o comunque finestre in generale con molte proprietà interessanti, menu ad albero, e molto molto altro ancora.

In arrivo prossimamente due articoli relativi a ExtJS:

• Creare un efficientissimo menu ad albero
• Creare un’interfaccia stile dei nostri adorati software stand-alone.

Per qualsiasi domanda, per riportare possibili errori, per suggerimenti, o qualsiasi cosa vogliate…lasciate un messaggio!

A presto!!

Materiale

Quick links:
demo datagrid | demo datagrid editable | download full example |