In questo tutorial, mostreremo come realizzare un
datagrid con ExtJs4, in particolare, un datagrid all'interno di una finestra,
dotato di paginatore, mostrando gli utenti presenti nel proprio
database. L'obiettivo è raggiungere un risultato simile all'immagine.
Creazione del database
Per prima cosa, creiamo il dabatase che chiameremo htmlit.
Sarà sufficiente creare una sola tabella utenti
che conterrà id e username:
CREATE TABLE IF NOT EXISTS `utenti` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(40) NOT NULL,
PRIMARY KEY (`id`)
);
INSERT INTO `utenti` (`id`, `username`) VALUES
(1, 'demo'),
(2, 'sensorario'),
(3, 'yago'),
(4, 'retron'),
(5, 'neo'),
(6, 'morpheus');Struttura dei files e delle cartelle
Vediamo ora come verranno disposti i files in questo articolo.
Partiremo dagli unici due file php: index.php e json.php.
Il primo file caricherà tutti i sorgenti javascript, quali il model, lo store,
e la finestra, mentre il secondo servirà
per rappresentare i dati ottenuti dal database in formato json. Come vedremo, il
file json.php verrà interrogato dal datagrid ad ogni cambio di pagina.
Mentre nella cartella js troviamo files e cartelle della nostra applicazione.
Lo sviluppo
Dopo aver creato il database e avendo chiara la posizione delle cartelle,
iniziamo a sviluppare la nostra applicazione.
Nel file index.php troviamo tutti i link per il caricamento dei sorgenti.
In questo esempio faremo uso della CDN di Sencha.
<!DOCTYPE html>
<html>
<head>
<!-- i cdn di extjs -->
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.0.2a/resources/css/ext-all.css" />
<script type="text/javascript" src="http://cdn.sencha.io/ext-4.0.2a/ext-all.js"></script>
<!-- la nostra applucazione -->
<script src="js/app/models/UtentiModel.js"></script>
<script src="js/app/stores/UtentiStore.js"></script>
<script src="js/app/views/FinestraDeiNomi.js"></script>
<script src="js/app/StartApp.js"></script>
</head>
<body></body>
</html>Il model
Il model restituisce i nomi dei dati che verranno
visualizzati. Fate molta attenzione, perché l'array fields deve corrispondere
esattamente ai nomi delle colonne della tabella utenti.
Ext.define('UtentiModel',{
extend:'Ext.data.Model',
fields: ['username','id']
});Lo store
Costruiamo ora lo store che avrà il compito di caricare i dati.
Lo store ha un parametro che si chiama model cui dovremo indicare il nome del
model che abbiamo definito poco prima.
Un parametro decisamente importante per ExtJs è pageSize,
in quando consente al framework di stabilire quante pagine sono necessarie per
visualizzare tutti i record. Lo store ha una proprietà che si chiama proxy nel
quale dobbiamo indicare che tipo di store si tratta, nel nostro caso ajax,
qual'è il suo indirizzo, nel nostro caso json.php
ed infine il reader. Con il reader andiamo a definire
alcune informazioni necessarie per dialogare con il datagrid. In particolare,
questo json dovrà restituirci quanti sono i record totali (totalProperty) e
come si chiama il suo elemento radice (root).
Ext.define('UtentiStore',{
extend: 'Ext.data.Store',
model:'UtentiModel',
autoLoad:true,
pageSize:5,
proxy:{
type:'ajax',
url:'json.php',
reader:{
type:'json',
root:'utenti',
totalProperty:'total'
}
}
});Ecco un esempio di riposta json:
{
"success":true,
"total":"17",
"utenti":[{
"id":"2",
"username":"admin"
},{
"id":"15",
"username":"cuspide"
},{
"id":"3",
"username":"demo"
},{
"id":"14",
"username":"diamine"
},{
"id":"16",
"username":"gdcesena"
}]
}La finestra con il datagrid
In questo passo realizzeremo la finestra che conterrà il datagrid,
a cui abbiamo aggiunto un pagingtoolbar. Questo componente ci fornisce
informazioni che indica il numero della pagina corrente, i record totali ma anche
delle frecce che ci consentono la navigazione tra le pagine.
var LocalStore = new UtentiStore;
Ext.define('FinestraDeiNomi',{
initComponent: function () {
this.callParent();
this.show();
},
extend: 'Ext.window.Window',
renderTo: Ext.getBody(),
title: 'html.it - datagrid',
width: 400,
height: 200,
layout: 'fit',
items: new Ext.grid.Panel({
store: LocalStore,
border: 0,
columns:[{
text: 'id',
dataIndex: 'id',
flex: 0.2
},{
text: 'username',
dataIndex: 'username',
flex: 0.8
}],
dockedItems:[{
xtype:'pagingtoolbar',
store: LocalStore,
dock:'bottom',
displayInfo:true
}]
})
});L'ultimo passaggio è quello di
caricare il file che farà partire l'applicazione.
Ext.onReady(function() {
Ext.create('FinestraDeiNomi');
});Il core dell'applicazione
Il file principale dell'applicazione è json.php che
verrà richiamato dallo store del datagrid ad ogni cambio pagina, inviando dei parametri,
start e limit, che serviranno per ottenere un set di record della nostra tabella.
$pdo = new PDO('mysql:host=127.0.0.1;port=8889;dbname=htmlit;', '***', '***');
$utenti = array();
$query = 'select * from utenti order by username limit ' . ($_GET['start']) . ',' . ($_GET['limit']) . '';
$result = $pdo->query($query);
foreach ($result as $item)
$utenti[] = array(
'id' => $item['id'],
'username' => $item['username']
);
$query = 'select count(*) from utenti';
$result = $pdo->query($query);
foreach ($result as $record)
echo json_encode(array(
'success' => true,
'total' => $record[0],
'utenti' => $utenti
));