GridPanel Dynamique
Nous allons créer un gridPanel dont les données sont envoyées par une page PHP :
Reprenez l'exemple du gridPanel Simple
Création de la base de données :
Soit la base de données : enregistrement
Modification de l'existant :
La modification à effectuer au code js est la suivante :
on enlève la propriété data ainsi que l'objet mesDonnees
var monStore = new Ext.data.JsonStore({
root: 'rows',
idProperty: 'numero_enregistrement',
fields:mesChampsDeDonnees,
data:mesDonnees
});
On la remplace par la propriété url. On ajoute autoLoad:true (pour que la grille se charge automatiquement)
var monStore = new Ext.data.JsonStore({
root: 'rows',
idProperty: 'numero_enregistrement',
fields:mesChampsDeDonnees,
url:'gridPanelDyn.php',
autoLoad:true
});
Le code complet :
la base de donnees :
CREATE TABLE IF NOT EXISTS `enregistrement` (
`numero_enregistrement` int(11) NOT NULL AUTO_INCREMENT,
`nom_enregistrement` varchar(45) COLLATE utf8_unicode_ci DEFAULT NULL,
`date_creation` date DEFAULT NULL,
PRIMARY KEY (`numero_enregistrement`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=4 ;
--
-- Contenu de la table `enregistrement`
--
INSERT INTO `enregistrement` (`numero_enregistrement`, `nom_enregistrement`, `date_creation`) VALUES
(1, 'Premier enregistrement', '2011-03-13'),
(2, 'Deuxieme enregistrement', '2011-03-14'),
(3, 'Troisième enregistrement', '2011-03-15');
La page gridPanel.html :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<link href="http://127.0.0.1/ext3/ExtJs3/resources/css/ext-all.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://127.0.0.1/ext3/ExtJs3/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="http://127.0.0.1/ext3/ExtJs3/ext-all-debug-w-comments.js"></script>
<script type="text/javascript" src="http://127.0.0.1/ext3/ExtJs3/src/locale/ext-lang-fr.js"></script>
<script type="text/javascript" src="http://127.0.0.1/ext3/gridPanel.js"></script>
</head>
<body>
</body>
</html>
La page gridPanel.js :
Ext.onReady(function(){
var mesChampsDeDonnees = [
{name: 'numero_enregistrement'},
{name: 'nom_enregistrement'},
{name: 'date_creation',type:'date',dateFormat:'Y-m-d'}
];
var monStore = new Ext.data.JsonStore({
root: 'rows',
idProperty: 'numero_enregistrement',
fields:mesChampsDeDonnees,
url:'gridPanelDyn.php',
autoLoad:true
});
var mesColonnes = [
{header: 'Identifiant', width: 200, dataIndex: 'numero_enregistrement',sortable: true},
{header: 'Nom', width: 200, dataIndex: 'nom_enregistrement',sortable: true},
{header: 'Date', width: 200, dataIndex: 'date_creation',xtype:'datecolumn',format:'d/m/Y',sortable: true}
];
var monGridPanel = new Ext.grid.GridPanel({
autoHeight:true,
renderTo:Ext.getBody(),
store: monStore,
columns:mesColonnes
});
monGridPanel.show();
});
La page gridPanelDyn.php :
<?php
//connexion à la base de données
mysql_connect('127.0.0.1','root','');
mysql_select_db('ext3');
//ma base est en iso -> je transforme les résultats en UTF-8
mysql_query("SET NAMES 'utf8'");
//requete sql : on recupere tous les enregistrements
$sql="select numero_enregistrement,nom_enregistrement,date_creation from enregistrement";
$result = mysql_query($sql);
//stock les résultats dans un tableau $data
while($row = mysql_fetch_array($result)){
$data[]=$row;
}
//retourn le tabelau en JSON
$return['rows'] = $data;
echo json_encode($return);
?>