Charger des données dans un GridPanel à partir d'une DB

Version imprimable

14/05/2009, 12h51
Erwan62

Charger des données dans un GridPanel à partir d'une DB

Bonjour,

Je suis confronté à un problème face auquel je suis étonné de ne trouver aucune informations après des heures de recherche...

Je développe une application Web sous ExtJS, et j'ai besoin d'un GridPanel dans lequel j'aimerais charger des données provenant d'un base de données.

Pour charger et afficher des données faites "à la main", je n'ai aucun problème.

Néanmoins, je ne trouve nul part un tutorial ou quelque-chose du genre expliquant comment charger dans mon GridPanel les données stockées dans ma base sous MySQL, ce qui est pourtant essentiel lorsqu'on veut développer une application dynamique 8O

Si quelqun sait comment faire, je lui serais reconnaissant de me fournir quelques explication :)
14/05/2009, 20h29
eric.pommereau

Bonjour,

Si les données que tu produit dynamiquement sont au format json alors tu peux utiliser le composant jsonStore à la place du simpleStore utilisé dans les exemples.

Pour le reste cela fonctionne de la même manière que dans les exemples, seul le type de store change.

Après, il faut que les données que tu produis soient en accord avec les données attendues par le store (le root et les champs) c'est expliqué succintement dans l'api du jsonStore.

C'est effectivement un cas courant d'utilisation qui mériterait d'être plus abondamment documenté.

Voilà @+

Effectivement, j'ai un script PHP qui retourne des données au format Json.

test2.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$cpt = 0;
		$output = array();
		$output['data'] = array();
 
		$sql = "SELECT civilite,nom,prenom,service,tel,poste,email FROM salaries";
		$req = mysql_query($sql);
 
		while($data = mysql_fetch_array($req))
		{
			$obj = array("civilite" => $data['civilite'],"nom" => $data['nom'],"prenom" => $data['prenom'],"service" => $data['service'],"tel" => $data['tel'],"poste" => $data['poste'],"email" => $data['email']);
 
			$output['data'][$cpt] = $obj;
 
			$cpt++;
		}
 
		$output['results'] = sizeof($output['data']);
 
		echo json_encode($output);

Soit une chaîne de ce style :

Code:

1
2
3
4
5
{"data":[{"civilite":"Mr.","nom":"Sanchez","prenom":"Adrien","service":"Informatique","tel":"06-16-81-55-31"
,"poste":"18","email":"a.sanchez@live.fr"},{"civilite":"Mr.","nom":"Gates","prenom":"Bill","service"
:"Direction","tel":"06-59-88-71-32","poste":"52","email":"g.bill@microsoft.com"},{"civilite":"Mme.","nom"
:"Dupont","prenom":"Jeanne","service":"Commercial","tel":"06-52-33-93-54","poste":"13","email":"d.jeanne
@continental.com"}],"results":3}

Ce script est appelé par mon GroupingStore dans test.js :

Code:

1
2
3
4
5
6
7
8
9
var ds = new Ext.data.GroupingStore({
                                                    proxy : new Ext.data.HttpProxy({
																						url : 'test2.php',
																						method : 'POST'
																				   }),
                                                    reader : reader,                                    // Reader associé
                                                    sortInfo : {field: 'nom', direction: "ASC"},        // Propriétés de tri des élements à l'affichage de la grille
													groupField : 'service'                              // Champ sur lequel les données sont groupées à l'affichage de la grille
                                                });

Et voici mon JsonReader :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
var reader = new Ext.data.JsonReader({
													root : 'data',
													totalProperty : 'results'			
												 },[
                                                        {name : 'civilite'},
                                                        {name : 'nom'},
                                                        {name : 'prenom'},
                                                        {name : 'service'},
                                                        {name : 'tel'},
                                                        {name : 'poste'},
                                                        {name : 'email'}
                                                    ]);

Etant donné que mes données Json sont correctement générées, je ne vois vraiment pas d'où vient l'erreur...

De plus, à l'examen du réseau sous FireBug, une requète en POST vers test2.php est bien émise dont la réponse est :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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>
	<title>ALTERNATIVE Formation</title>
 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
 
<body>
 
	{"data":[{"civilite":"Mr.","nom":"Sanchez","prenom":"Adrien","service":"Informatique","tel":"06-16-81-55-31"
,"poste":"18","email":"a.sanchez@live.fr"},{"civilite":"Mr.","nom":"Gates","prenom":"Bill","service"
:"Direction","tel":"06-59-88-71-32","poste":"52","email":"g.bill@microsoft.com"},{"civilite":"Mme.","nom"
:"Dupont","prenom":"Jeanne","service":"Commercial","tel":"06-52-33-93-54","poste":"13","email":"d.jeanne
@continental.com"}],"results":3}	
</body>

Si quelqun peut m'éclairer sur pourquoi mes données ne sont pas chargée dans la base, ce serait sympa :)

15/05/2009, 16h00
eric.pommereau

Bonjour,

Ta réponse doit contenir exclusivement du JSON donc pas de balise HTML.

Dans ton cas cela doit empêcher la librairie de "parser" le JSON retourné.

Ensuite tu peux inspecter dans Firebug la collection items de ton store pour voir si les éléments sont chargés ou non.
15/05/2009, 16h27
Erwan62

Bonjour,

En supprimant les balises HTML, cela marche effectivement ;)

Merci pour ton aide :)