Discussion :

[Loloperso]

Bonjour,

Je me suis inspiré de ce fil pour mettre à jour le Store d'un composant Grid de Dojo : http://www.developpez.net/forums/d80...grid-datagrid/

Quand je charge ma page la première fois, j'ai ce code :

Code :

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

1
2
3
4
5
<span dojoType="dojo.data.ItemFileReadStore" jsId="store1" url="<?php echo POSITION.'inclus/depenses/deptdb/deptdb_contenu.php'; ?>">
</span>		
 
<table dojoType="dojox.grid.DataGrid" jsId="grid" id="grid" store="store1">
...

Ca marche : mon fichier php renvoie bien un echo au format JSON... et ma grille s'affiche !

Je souhaite pouvoir la mettre à jour (afficher des sources/stores différents) de multiples manières et j'ai donc créé un petit formulaire sur le côté de la page. Les boutons sur le formulaire font appel à une fonction JS telle que :

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
function updatedata(){	
dojo.byId("deptdb").innerHTML="<img alt=\'Patientez svp\' src='<?php echo POSITION.'inclus/js/dojox/image/resources/images/loading.gif'; ?>'>";
 
dojo.xhrPost( {
	url: "<?php echo POSITION.'inclus/depenses/deptdb/deptdb_contenu.php'; ?>",
	form: dojo.byId("tdbmenu"),
	handleAs: "text",
	timeout: 5000,
	load: function(response, ioArgs) {
		dijit.byId("grid").setStore(response);
		return;
		},
	error: function(response, ioArgs) {
		dojo.byId("deptdb").innerHTML = 'Serveur occupé ... <a href="#" onClick="updatedata()">Actualiser</a>';
		return response;
		}
        });
}

Ce code déclenche l'argument error: de la fonction....
Pourtant, si dans l'argument load je mets : dojo.byId(un div quelconque).innerHTML=response; j'affiche bien une chaîne de caractères au format JSON dans le div concerné. Donc mon petit script Php renvoie bien ce qu'on lui demande.

Où est-ce que je me trompe ??
Merci de votre aide !

PS : est-ce que ensuite je pourrai changer le nombre de colonnes et leur champ field, sans avoir non plus à recharger la page ??

[Loloperso]

Complément d'information : voici le code erreur qui m'est retourné :

Code :

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

TypeError: this.store.getFeatures is not a function

Moi, ça m'aide pas... et vous ??

[Loloperso]

J'avance....

J'ai changé la partie load de mon xhrPost :

Code :

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

1
2
3
4
5
load: function(response, ioArgs) {
var storenew = new dojo.data.ItemFileReadStore({data: 'response'});
dijit.byId("grid").setStore(storenew);
return;
}

Donc là, je ne sors plus sur l'erreur du xhrPost (error: ).

Par contre, ma table se met à jour et m'affiche : Une erreur est survenue

A mon avis, j'écris mal le contenu de la parenthèse de ItemFileReadStore et en fait je ne passe pas le contenu de la variable response, mais seulement le mot : response.

Un avis ?? Merci

[emmanuel.remy]

Salut,

J'avance....

J'ai changé la partie load de mon xhrPost :

Code :

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

1
2
3
4
5
load: function(response, ioArgs) {
var storenew = new dojo.data.ItemFileReadStore({data: 'response'});
dijit.byId("grid").setStore(storenew);
return;
}

Donc là, je ne sors plus sur l'erreur du xhrPost (error: ).

Par contre, ma table se met à jour et m'affiche : Une erreur est survenue

A mon avis, j'écris mal le contenu de la parenthèse de ItemFileReadStore et en fait je ne passe pas le contenu de la variable response, mais seulement le mot : response.

Un avis ?? Merci

Tu as deux soucis: d'abord tu as mis response entre quotes et donc ce n'est plus un "objet" mais une chaine, et tu as dit à Dojo que le retour AJAX est de type text: il faut que ce soit JSON car cela indique à Dojo de faire un eval pour fabriquer un objet:

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
dojo.xhrPost( {
	url: "<?php echo POSITION.'inclus/depenses/deptdb/deptdb_contenu.php'; ?>",
	form: dojo.byId("tdbmenu"),
	handleAs: "json",
	timeout: 5000,
	load: function(response, ioArgs) {
      var storenew = new dojo.data.ItemFileReadStore({data: response});
      dijit.byId("grid").setStore(storenew);
      return;
	},
	error: function(response, ioArgs) {
		  dojo.byId("deptdb").innerHTML = 'Serveur occupé ... <a href="#" onClick="updatedata()">Actualiser</a>';
		  return response;
		}
});

Note qu'il serait plus intéressant de ne pas passer par un xhrPost mais plutôt directement et simplement en exécutant les deux lignes de code:

Code :

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

1
2
var storenew = new dojo.data.ItemFileReadStore({url: ....});
dijit.byId("grid").setStore(storenew);

ERE

[Loloperso]

Ca marche Emmanuel !

Voici mon code final :

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
20
dojo.byId("deptdb").innerHTML="<img alt=\'Patientez svp\' src='<?php echo POSITION.'inclus/js/dojox/image/resources/images/loading.gif'; ?>'>";
 
	dojo.xhrPost( {
		url: "<?php echo POSITION.'inclus/depenses/deptdb/deptdb_contenu.php'; ?>",
		form: dojo.byId("tdbmenu"),
		handleAs: "json",
		timeout: 5000,
		load: function(response, ioArgs) {
			var storenew = new dojo.data.ItemFileReadStore({data: response });
			var grid = dijit.byId("grid");
			grid.setStore(storenew);
 
			dojo.byId("deptdb").innerHTML = response['label'];
			return response;
		},
		error: function(response, ioArgs) {
			dojo.byId("deptdb").innerHTML = response;
			return response;
		}
});

Note qu'il serait plus intéressant de ne pas passer par un xhrPost mais plutôt directement et simplement en exécutant les deux lignes de code:

Je suis d'accord et j'avais pensé à cette solution en effet, mais en désespoir de cause. Car j'ai une idée derrière la tête (à défaut de l'avoir déjà à l'écran bien sûr !).

Dans cette grille, je vais afficher des données différentes selon les choix faits par l'utilisateur. Elles seront très différentes et d'ailleurs les colonnes à afficher ne seront pas les mêmes à chaque fois. Ni le titre de la table (la "légende").

Je ne veux pas recharger toute la page à chaque fois (pour le confort de navigation). Donc "Ajax".

Au début, mon appel Ajax renvoyait toute la Grid (et pas seulement son store), mais évidemment, elle n'était pas parsée (page déjà chargée), elle n'avait donc pas de mise en forme, ni de données (juste le contenu de <th> s'affichait). Impossible de parser ensuite, ni d'utiliser la méthode que tu m'avais donnée là : http://www.developpez.net/forums/d72...e/#post4522400

Donc, mon idée :

• j'affiche une page avec une Grid, afin que le Parser fasse son boulot lors de l'affichage (ici, c'est ok, ça marche)
• je fais un appel xhrPost en envoyant les choix de l'utilisateur à xyz.php
• xyz.php me renvoi (par echo) : une chaine JSON qui contient 'identifier' et 'items' (classique), 'name' (je met ici la chaine pour la légende, voir mon code), et un autre champ que je vais appeler 'layout' et j'y mettrai un array pour le layout

J'imagine que j'utiliserai un setLayout, comme j'ai utilisé setStore ???

Merci encore pour cette assistance. Je met le tag résolu car la première question est répondue.

Laurent.

[Loloperso]

Juste pour info, voici la suite de mon raisonnement juste au dessus.

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
dojo.xhrPost( {
	url: "<?php echo POSITION.'inclus/depenses/deptdb/deptdb_contenu.php'; ?>",
	form: dojo.byId("tdbmenu"),
	handleAs: "json",
	timeout: 5000,
	load: function(response, ioArgs) {
		var storenew = new dojo.data.ItemFileReadStore({data: response });
		var grid = dijit.byId("grid");
		grid.setStore(storenew);
		grid.setStructure(response['layout']);
				
		dojo.byId("deptdb").innerHTML = response['label'];
		return response;
		},
	error: function(response, ioArgs) {
		dojo.byId("deptdb").innerHTML = response;
		return response;
		}
});

La méthode pour changer le layout de la Grid est bien setStructure, et non pas setLayout.

Pour illustrer, voici un exemple de la valeur JSON reçue :

Code :

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

{"layout":[{"field":"item_nom","name":"Description","width":"auto"},{"field":"item_ean","name":"EAN","width":"auto"}],"identifier":"achat_detail_id","label":"Liste des articles achet\u00e9s : 2009-08-10 -> 2009-09-10","items":[{"achat_detail_id":"28","item_ean":"3179732324818","item_nom":"Eau de perrier"},{"achat_detail_id":"27","item_ean":"3258170010351","item_nom":null}]}

J'en conclus qu'on peut rajouter plein d'infos (genre "layout") et néanmoins toujours avoir (et faire interpréter) les valeurs dans "items".

Si cela peut d'autres qui cherchent des solutions....

Laurent

[emmanuel.remy]

Salut,

Dans cette grille, je vais afficher des données différentes selon les choix faits par l'utilisateur. Elles seront très différentes et d'ailleurs les colonnes à afficher ne seront pas les mêmes à chaque fois. Ni le titre de la table (la "légende").

Note que tu peux aussi créer la grid de manière programmative, ce qui peut être utile si tu souhaites réellement réinitialiser les paramètres entre 2 créations.

Et pour être complet, il est préférable d'utiliser

Code :

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

grid.attr('structure',...);

plus tôt que setStructure, qui sera obsolète dans la v2.



ERE

[Loloperso]

Hello !

qui sera obsolète dans la v2

J'avoue ne pas très bien comprendre ça, quand il s'agit d'un composant Dojox. Pour moi, ces composants suivent leurs propres chemins, et n'évoluent pas forcément au même moment que les "officiels" Dojo/Dijit.... et que d'ailleurs cela fait partie du risque de les utiliser : Dojo/Dijit peuvent évoluer et rendre donc un Dojox non fonctionnel ?!?

Ceci étant dit (quel soulagement !! ), j'ai quand même suivi ton conseil !

créer la grid de manière programmative

Oui ! J'ai lu sur le web (où ça, je n'en sais plus rien, j'ai passé ces deux derniers jours à taper "Dojo", "grid", & cie dans Google ), qu'un moyen d'accélérer le chargement de pages qui utilisaient des framework (Dojo ou autre) était de ne charger que le minimum (genre BorderContainer), puis d'afficher progressivement les autres gadgets (genre ici la Grid).

Aujourd'hui, toutes mes pages incluent un "preloader" (une image d'horloge qui recouvre tout l'écran) et que j'efface avec (dans cet ordre) :

Code :

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

1
2
3
dojo.addOnLoad(function(){
	dojo.parser.parse();
	hideLoader();

De ce que je comprends, aujourd'hui ma Grid est créée de manière déclarative et donc l'écran n'apparait qu'une fois tout (y compris la Grid) a été parsé.

Est-ce plus long que ci-dessous :

Si je crée ma Grid de manière programmative dans une fonction, je pourrais parser les éléments principaux de mise en page, afficher l'écran, inclure la Grid. Comme ça :

Code :

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

1
2
3
4
dojo.addOnLoad(function(){
	dojo.parser.parse();
	hideLoader();
      detruitGridSiExistePuisCreeNouvelle();

Mais sera-t'elle parsée ?? Qu'elle serait la structure d'une telle fonction detruitGridSiExistePuisCreeNouvelle() ?? Est-ce que l'affichage sera réellement plus rapide (j'ai conscience que l'utilisateur verrait son écran se remplir peu à peu au lieu de ne le voir apparaitre qu'une fois complet) ??

[emmanuel.remy]

Salut,

Le fait de parser sert uniquement quand on fournit à Dojo un noeud qui n' as pas été traité. Cela peut être une solution pour charger certains éléments et ensuite seulement d'autres qui seront parsés. Mais de toute façon il n'y a pas de gain de temps particulier, ce n'est qu'une autre façon de procéder.

ERE