Discussion :

[Erwan62]

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

Si quelqun sait comment faire, je lui serais reconnaissant de me fournir quelques explication

[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à @+

[Erwan62]

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

test2.php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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.

[Erwan62]

Bonjour,

En supprimant les balises HTML, cela marche effectivement

Merci pour ton aide