Scarichiamo la libreria Ext dal sito ufficiale. Decomprimiamo in una cartella 'ext' e creiamo una cartella 'tabella_dati' allo stesso livello. Inseriamo un file di nome tabella.html e una cartella js che conterrà in nostri file javascript. Dentro a quest’ultima creiamo un file di nome tabella.js e, giunti a questo punto, apriamo i nostri file con un editor di testo dove scriveremo il codice della nostra tabella simile a Excell.
Il file tabella.html è molto semplice. Il necessario per poter far funzionare la libreria Ext e un tag div chiamato grid-example, che utilizzeremo come contenitore della nostra tabella.
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<div id="grid-example"></div>
Nelle ultime righe del nostro codice HTML abbiamo segnalato al browser di leggere il codice javascript che si trova nella pagina tabella.js. Il contenuto dei dati della tabella è molto semplice da inserire nel nostro file. Lo abbiamo collocato all’inizio della nostra pagina e messo dentro a una struttura che prende il nome di Array. Questa contiene i dati seguendo un particolare ordine. Nel nostro caso ogni riga dell’array dei dati contiene rispettivamente il nome di un'attività, la sua data di inizio, la relativa scadenza, e uno stato che ci aiuta a capire se l'attività e in corso, pianificata o altro.
var myData = [
['Realizzare 2 video per code it','03/06/2008','23/06/2008','IN CORSO'],
['Realizzare 3 articolo per HTML.it','23/06/2008','24/06/2008','PIANIFICATA'],
['Procedere con il disegno delle applicazioni IPHONE','13/04/2008','23/05/2008','IN RITARDO'],
['Comprare un IPHONE','03/07/2008','23/07/2008','PIANIFICATA'],
['Comprare MAC','04/07/2008','23/08/2008','PIANIFICATA'],
['Scrivere lettera a Mario Rossi','09/06/2008','02/10/2008','PIANIFICATA'],
['Cercare ristorante per Barbara Bianchi','01/10/2008','23/12/2008','PIANIFICATA']
];
Il codice di questo javascript rispecchia il classico schema a 'scatole cinesi' tipico della programmazione oggetti e di Ext.js. Dentro a un oggetto ne mettiamo un altro che ne contiene un altro ancora che contiene degli attributi. Questi attributi servono a descrivere le caratteristiche peculiari dell'oggetto in questione. Pertanto avremo oggetti come lo store che contiene dei campi, che contengono attributi chiamati name e type. Questi servono per istruire la nostra tabella a capire se il contenuto di una determinata colonna sarà una data o un campo di testo normale o qualsiasi altro elemento siamo soliti incontrare nelle nostre pagine web.
var store = new Ext.data.SimpleStore({
fields: [
{name: 'attivita'},
{name: 'inizio', type: 'date', dateFormat: 'd/m/Y'},
{name: 'scadenza', type: 'date', dateFormat: 'd/m/Y'},
{name: 'stato'}
]
});
Grazie a questa forma di programmazione riusciamo a comprendere rapidamente ciò che troviamo scritto nel codice rappresentante l’oggetto grid. In quest’ultimo, infatti, includiamo sia attributi che descrivono le colonne della griglia, sia controlli che consentono alla nostra tabella di evitare di accettare date che cadono nei week end o campi che non siano valorizzati.
var grid = new Ext.grid.EditorGridPanel({
store: store,
region:'center',
columns: [
{id:'attivita',header: "Attività", width: 260, sortable: true, dataIndex: 'attivita',
editor: new fm.TextField({
allowBlank: false
})
},
{header: "Data Inizio", renderer: formatDate, sortable: true, dataIndex: 'inizio',
editor: new fm.DateField({
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: 'Nel week end non si lavora!'
})
},
{header: "Data Scadenza", renderer: formatDate, sortable: true, dataIndex: 'scadenza',
editor: new fm.DateField({
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: 'Nel week end non si lavora!'
})
},
{header: "Stato", width: 160, sortable: true, dataIndex: 'stato',
editor: new fm.TextField({
allowBlank: false
})
}
],
stripeRows: true,
title:'Le mie attività'
});
Il pannello che espone il tutto sarà una classica pagina divisa con un layout di nome border, in cui possiamo collocare i nostri oggetti secondo coordinate di tipo: North, South, East, West e Center.
var panel = new Ext.Panel({
title:'Lista delle attività pianificate',
height:Ext.getBody().getViewSize().height,
width:Ext.getBody().getViewSize().width,
frame:true,
layout: 'border',
items: [ {
region: 'north',
frame:true,
height: 60,
html:'In questa pagina elenco sottoforma di tabella le mie attività attuali.
'+
'Come in un file Excell, queste celle sono editabili. Per rendere capace questa tabella di registrare i cambiamenti'+
'basterebbe poterla agganciare a una qualsiasi componente server che riesce a intercettare tutti i nuovi valori delle celle'
},grid]});
Il risultato è una tabella relativamente complessa creata in pochi minuti. Troviamo controlli avanzati come l'ordinamento dei dati, la possibilità di muovere le colonne, di ridimensionarle, di modificarne il contenuto, di farle sparire e apparire a nostro piacimento. Il tutto in forma completamente indipendente dal browser che stiamo utilizzando, ovvero cross browser. Inoltre, in aggiunta a questi controlli di default, troviamo i nostri controlli, come le date dei week end bloccate o i campi di testo che non possono essere lasciati vuoti.
editor: new fm.DateField({
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: 'Nel week end non si lavora!'
})
]
[
editor: new fm.TextField({
allowBlank: false
})
