Chargement dynamique d'un datagrid

**Eric Pasquier** · 28/11/2009, 14h43

Bonjour,
J'essaye (désespérément) de charger un datagrid contenu dans un onglet qui est lui même chargé dynamiquement.
Je voudrais que l'utilisateur puisse modifier les données présentées ainsi que rajouter des lignes.
J'ai écris le code ci-dessous (extrait) :
- sur l'évênement onRowClick d'un premier datagrid, je charge le contenu de mes onglets (cette partie fonctionne)
- les onglets contiennent des datagrids dont je voudrais charger le contenu dynamiquement.

Pour l'extrait ci-dessous, j'ai placé le storeActions et le contenu du tabActions, mais je le charge en réalité avec un xhrGet.

Mon problème, c'est que je n'arrive pas à recharger le store pour rafraichir le datagrid avec le nouveau contenu. Je suis passé par un datastore pour faire un "save" plus tard.

Merci pour votre aide et suggestions.

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
 
<script type="text/javascript">
 
  var MCurrentId=0;
  var MCurrentItemId=0;
 
  //=============================
  // onTableItemClick
  // Sur clic d'une ligne de la table, mise a jour des onglets
  //-----------------------------
  function onTableItemClick(cell)
  {
  	var item   = cell.grid.getItem(cell.rowIndex);
  	var	id     = this.store.getValue(item, "id");
  	var	itemid = this.store.getValue(item, "ItemId");
 
    MCurrentId      = id;
    MCurrentItemId  = itemid;
 
    //=============================
    // getServerCallback
    // On remplace tout le code HTML du widget
    //-----------------------------
    function getServerCallback(data,ioArgs)
    {
     	//dijit.byId("tabspanel").setContent(data);	
     	dijit.byId("tabactions").setContent(data);	
 
//------------------------------
// Cette partie ne fonctionne pas
//------------------------------
      // Mise a jour du "store" et donc de la grille
      storeActions.fetch({
        url: "<?php echo BASE_URL . '/datastore/getactions/itemid/' ?>" + MCurrentId,
        query: { id: '*' },
        //onComplete: 
        //onError:
      });
    }       
 
    dojo.xhrGet({
      url:     "<?php echo BASE_URL . '/datastore/gettabs ?>",
      load:    getServerCallback,
      //error:   getServerError,
      content: {id: MCurrentId, itemid: MCurrentItemId},
      timeout: 15000
    });
  }
</script>
 
 
 
<!-- Store items -->
<div dojoType="dojo.data.ItemFileWriteStore" jsId="storeItems" url="<?php echo BASE_URL . '/datastore/getitems ?>"></div>
 
<!-- Store actions -->
<div dojoType="dojo.data.ItemFileWriteStore" jsId="storeActions" ></div>
 
<!-- Table des items (en haut) -->
<div dojoType="dijit.layout.ContentPane" splitter="true" region="top" style="height:200px;" sizeMin="50" sizeShare="20">
 
  <!--Table des items-->
	<table id="tableitems" dojoType="dojox.grid.DataGrid" jsId="gridItems" edit="false" selectable="true"
		store="storeItems" query="{id:'0'}" onRowClick="onTableItemClick" >
		<thead>
			<tr>
			  <th field="id" width="20px">Id</th>
			  <th field="ItemId" width="20px">N°</th>
			  <th field="ItemLibelle" width="100%">Description des items</th>
			</tr>
		</thead>
	</table> <!--Table des items-->
</div> <!-- Table des items (en haut) -->
 
 
<!-- Detail d'un item (au centre) -->
<div id="tabspanel" jsId="tabspanel" dojoType="dijit.layout.ContentPane" splitter="true" region="center" sizeMin="50" sizeShare="80">
 
  <div id="tabs" dojoType="dijit.layout.TabContainer" jsId="tabs">
 
Ce contenu est chargé dynamiquement,
placé ici pour l'explication
 
    <div id="tabactions" dojoType="dijit.layout.ContentPane" title="Actions" >
    	<p>Liste des actions :</p>
 
      <table style="height:200px;" id="tableactions" jsId="gridActions" dojoType="dojox.grid.DataGrid" query="{id:'*'}" store="storeActions">
        <thead>
          <tr>
            <th field="id" >Id</th>
            <th field="libelle" >Description</th>
          </tr>
        </thead>
      </table>
    </div>
 
    <div id="tabdocuments" dojoType="dijit.layout.ContentPane" title="Doscuments" >
    	<p>Liste des documents :</p>
    </div>
  </div> <!-- tabs -->
</div> <!-- Detail d'un item (au centre) -->

**emmanuel.remy** · 29/11/2009, 00h18

Salut,

Dans ce code:

Code :

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

1
2
3
4
5
6
      storeActions.fetch({
        url: "<?php echo BASE_URL . '/datastore/getactions/itemid/' ?>" + MCurrentId,
        query: { id: '*' },
        //onComplete: 
        //onError:
      });

l'attribut url n'est jamais pris en compte pas cette fonction. Plutôt faire:

Code :

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

1
2
3
4
5
6
7
8
 
storeActions.attr("url","<?php echo BASE_URL . '/datastore/getactions/itemid/' ?>" + MCurrentId);
 
storeActions.fetch({
        query: { id: '*' },
        //onComplete: 
        //onError:
      });

ERE

**Eric Pasquier** · 29/11/2009, 00h37

Je crois que j'avais essayé. J'ai le message suivant :
Error when updating data to the server :TypeError: storeActions.attr is not a function [object Object]

J'ai regardé dans le code, mais je n'ai pas trouvé une autre manière d'initialiser l'url, à part au moment de la création de la classe (variable _jsonFileUrl).

L'autre piste que je suis en train de creuser, c'est la construction du store avec un tableau des valeurs, puis un refresh de la grille en forçant le store :

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
<script "connect on what ?" >dataItems = {
     identifier: 'id', label: 'libelle', items: [
          {id:'1', libelle:'Essai d\'une action'},
          {id:'2', libelle:'Essai d\'une deuxieme action'}
        ]
      };
 
      // Liberation du store precedent : cela fonctionne-t-il ?
      if (storeActions != undefined)
      {
        delete storeActions;
        storeActions=undefined;
      }
 
    storeActions = new dojo.data.ItemFileWriteStore({data: dataItems});
    gridActions.setStore(storeActions);
</script>

Ca marche, mais je n'arrive pas à executer ce script dans la partie chargée dynamiquement, après le xhrGet + setContent, même en exécutant un

Code :

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

dojo.parser.parse(data);

De plus, je me pose de grosses questions sur les fuites de mémoires des anciennes valeurs du store.

Eric.

**emmanuel.remy** · 29/11/2009, 01h02

Envoyé par Eric Pasquier

Je crois que j'avais essayé. J'ai le message suivant :
Error when updating data to the server :TypeError: storeActions.attr is not a function [object Object]

Exact, fais plutôt storeActions.url=.... J'ai été un peu vite en besogne, attr est valable avec les form widget...

J'ai regardé dans le code, mais je n'ai pas trouvé une autre manière d'initialiser l'url qu'au moment de la création de la classe (variable _jsonFileUrl).

Il faut faire attention car de mémoire il y a plusieurs variables concernées: _jsonFileUrl, ccUrl, url ...

ERE

**Eric Pasquier** · 29/11/2009, 01h08

Idem : Error when updating data to the server :TypeError: storeActions.url is not a function [object Object]

J'ai complété ma réponse juste au dessus. Sais tu comment je peux exécuter le <script> après le xhrget ?

Eric.

**emmanuel.remy** · 29/11/2009, 02h02

avant toute chose, peux tu me passer le code que tu exécutes car là ce n'est pas très normal que tu plantes ainsi.

ERE

**Eric Pasquier** · 29/11/2009, 12h25

Bonjour !
Après avoir butiné ici et là, j'ai découvert qu'il n'est pas possible de recharger un Store dynamiquement. La seule solution est de le détruire et d'en créer un autre.
Le ContentPane a été prévu pour détruire et recréer les widgets fils lorsque l'on fait attr("content", ...) ou mieux attr("href", ...), ce qui, dans mon cas, m'évite de faire moi même le xhrget.

Pour recharger mon Store, et donc mon Datagrid, j'ai utilisé non pas la propriété 'url', mais 'data' : je génère une variable avec le contenu (dans le script de ma vue), puis je créé mon store avec data="variable".
Ca marche, sauf que le <script> qui me sert à affecter la variable n'est pas exécuté lors du chargement du ContentPane. J'ai même placé des propriétés obsolètes, comme executeScripts=true et separateScript=False, des events, ...

Si dessous un exemple fonctionnel :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <title>TEST ContentPane</title>
 
<style type="text/css">
    @import "/dojo-release-1.3.2-src/release/dojo/dijit/themes/soria/soria.css";
    @import "/dojo-release-1.3.2-src/release/dojo/dojox/grid/resources/Grid.css";
    @import "/dojo-release-1.3.2-src/release/dojo/dojox/grid/resources/soriaGrid.css";
 
html, body {
  height:100%;
}
</style>
 
<script type="text/javascript">
    var djConfig = {"usePlainJson":true,"parseOnLoad":true,"isDebug":false};
</script>
<script type="text/javascript" src="/dojo-release-1.3.2-src/release/dojo/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
  dojo.require("dojo.data.ItemFileWriteStore");
  dojo.require("dijit.layout.ContentPane");
  dojo.require("dijit.layout.BorderContainer");
  dojo.require("dijit.layout.TabContainer");
  dojo.require("dojox.grid.DataGrid");
  dojo.require("dijit.form.Button");
</script>
 
 
<script type="text/javascript">
  // Si la variable est "globale", le contenu s'affiche bien (enlever '_test' du nom de la variable)
  var dataActions_test = {identifier: 'id', label: 'libelle', items: [
                            {id:'1', libelle:'Essai d\'une action'}
                         ]};
 
  //=============================
  // loadTabActions
  //-----------------------------
  function loadTabActions()
  {
    console.log ("loadTabActions");
    dijit.byId("tabactions").attr("href", "tabactions.htm");	
  }
 
</script>
 
 </head>
<body class="soria">
 
  <h1>Bonjour !</h1>
  <div style="height:300px" dojoType="dijit.layout.BorderContainer" design="headline" gutters="false" >
 
    <!-- Detail d'un item (au centre) -->
    <div id="tabspanel" jsId="tabspanel" dojoType="dijit.layout.ContentPane" region="center" sizeMin="50" sizeShare="80" >
 
      <div id="tabs" dojoType="dijit.layout.TabContainer" jsId="tabs">
        <div id="tabactions" dojoType="dijit.layout.ContentPane" title="Actions" onLoad="console.log('tab actions on load');" executeScripts="true" separateScript="false" >
          <p>Onglet actions</p>
        </div>
      </div>
 
    </div> <!-- Detail d'un item (au centre) -->
 
    <div dojoType="dijit.layout.ContentPane" splitter="false" region="bottom" sizeMin="50" sizeShare="80" style="text-align:center">
      <button style="margin:5px auto;" dojoType="dijit.form.Button" onClick="loadTabActions" iconClass="plusIcon">Charger les actions</button>
    </div>
 
  </div>
 
</body>
</html>

Et pour le fichier du ContentPane, tabactions.htm :

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
21
22
23
24
25
26
 <script type="text/javascript">
    // N'est jamais appelé
    console.log("TabActions");
 
    var dataActions = {identifier: 'id', label: 'libelle', items: [
                        {id:'1', libelle:'Essai d\'une action'}
                      ]};
  </script>
 
 
  <script type="dojo/method" event="onLoad">
    // N'est jamais appelé
    console.log("dojo/method event=onLoad");
  </script>
 
  <!-- Store actions -->
  <div dojoType="dojo.data.ItemFileWriteStore" jsId="storeActions" data="dataActions"></div>
 
  <table style="height:200px; width:100%;" id="tableactions" jsId="gridActions" dojoType="dojox.grid.DataGrid" query="{id:'*'}" store="storeActions">
    <thead>
      <tr>
        <th field="id" >Id</th>
        <th field="libelle" width="100%">Description</th>
      </tr>
    </thead>
  </table>

Une idée pour faire executer le script du fichier tabactions.htm ?

Merci,
Eric.

**Eric Pasquier** · 29/11/2009, 23h24

Il "suffit" d'utiliser dojox.layout.ContentPane à la place de dijit.layout.ContentPane, qui a justement été ajouté pour exécuter les scripts. Laborieux.

Autrement, c'est pas mal: j'ai 4 datagrids dans 4 tabs, et le xhrget de chaque ContentPane/datagrid n'est exécuté que si le Tab est visible, ce qui limite les accès au serveur au strict nécessaire.

Je vais maintenant me lancer dans la modification + sauvegarde ...

Eric.

**emmanuel.remy** · 30/11/2009, 00h50

Envoyé par Eric Pasquier

Il "suffit" d'utiliser dojox.layout.ContentPane à la place de dijit.layout.ContentPane, qui a justement été ajouté pour exécuter les scripts. Laborieux.

Autrement, c'est pas mal: j'ai 4 datagrids dans 4 tabs, et le xhrget de chaque ContentPane/datagrid n'est exécuté que si le Tab est visible, ce qui limite les accès au serveur au strict nécessaire.

Je vais maintenant me lancer dans la modification + sauvegarde ...

Eric.

Concernant ce souci avec le contentPane, il est question de remplacer purement et simllement le dijit.layout.contentPane par dojox.layout.contentPane...

Enfin juste une remarque: ton événement devrait être posé via un dojo/connect et pas un dojo/method qui redéfinit la fonction.

Code :

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

1
2
3
4
 
<script type="dojo/connect" event="onLoad">
...
</script>

Bon dev pour la suite,

ERE

**emmanuel.remy** · 30/11/2009, 00h52

Après avoir butiné ici et là, j'ai découvert qu'il n'est pas possible de recharger un Store dynamiquement.

En fait pour être précis, on peut redéfinir le store à condition qu'il n'ait pas fini d'être chargé. Sinon il faut le recréer ou passer par des stores plus "dynamiques" (queryReadStore, JsonRest, ...)

ERE

**emmanuel.remy** · 02/12/2009, 19h10

Re Eric,

Tu écrivais dernièrement

Après avoir butiné ici et là, j'ai découvert qu'il n'est pas possible de recharger un Store dynamiquement.

Cela me génait mais je n'arrivais pas à mettre le doigt dessus...

En fait on peut VRAIMENT recharger le store sans le recréer mais cela doit se faire en le fermant au préalable, ainsi:

Code :

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

1
2
3
4
5
6
7
 
//on indique qu'on souhaite la réinitialisation des variables du store lors de sa fermeture
//peut être passé lors de la construction
store.clearOnClose=true;
store.close();
store.url="xxxxx";  //ou store.data=...
store.fetch(.....);

Et là c'est ok (je viens de tester...).

ERE

**Eric Pasquier** · 03/12/2009, 01h19

Emmanuel,

Entre temps, je suis tombé sur une doc parfaitement à jour et qui m'a permis de progresser énormément (là je vois tout le monde écarquiller les yeux) : le code source ! Comme pour le framework de Zend ...

J'ai vu cette partie du close, mais je ne l'avais pas encore essayé.
J'ai dans l'idée de tout mettre dans un seul store (y compris mes quelques checkbox et radio) pour centraliser la mise à jour avec le serveur.
Merci pour ce commentaire.

Question: à part Firebug, il y a-t-il des outils intéressant pour aider le debug ?

Eric.

**emmanuel.remy** · 03/12/2009, 09h49

Envoyé par Eric Pasquier

Emmanuel,

Entre temps, je suis tombé sur une doc parfaitement à jour et qui m'a permis de progresser énormément (là je vois tout le monde écarquiller les yeux) : le code source !

Ma bible !

C'est dommage d'en arriver là mais oui c'est de loin la meilleure doc (même s'il existe un excellent bouquin sur Dojo). Avec les tests associés, on s'en sort généralement très bien. D'ailleurs, sans trahir de secret, c'est le source que je consulte quand je suis sec sur une réponse pour le forum.

J'ai dans l'idée de tout mettre dans un seul store (y compris mes quelques checkbox et radio) pour centraliser la mise à jour avec le serveur.

Si tu veux faire des synchros store-server, je te conseille de regarder plutôt du côté du JsonRestStore: LazyLoading, update, voire schémas JSON (l'équivalent de schéma XML) tout y est et c'est très bien conçu. Sinon tu risques de te taper des mises à jour manuelles, et si tu peux t'en passer...

Question: à part Firebug, il y a-t-il des outils intéressant pour aider le debug ?

Perso je n'utilise que lui car je l'associe avec FirePHP et j'ai ainsi un excellent couple . Mais rapproche toi de cet article de Bovino c'est la grande classe

http://javascript.developpez.com/cou...t-utiles/#LVII

ERE

**jamilla** · 07/09/2010, 13h09

Salut,

En cherchant des infos sur clearOnClose je suis tombé sur cette discution.

Je cherche a supprimer la cache pour une query spécifique et non pour tout le store. Est ce possible?

Merci

**Eric Pasquier** · 07/09/2010, 14h22

Bonjour,
Je ne sais pas ce que tu entends par "cache", mais j'imagine que tu souhaites rafraichir une partie des données seulement.
Avec un store du type dojo.data.ItemFileWriteStore ou dojo.data.ItemFileReadStore, ce n'est pas possible car le chargement est fait en une seule fois.

Tu peux essayer de regarder du cote de dojox.data.QueryReadStore qui lui le fait au fur et à mesure.
Je n'ai pas regardé l'API, mais il devrait être possible de lui forcer le rechargement d'une donnée (au pire en le forçant directement dans le code).

Eric

**jamilla** · 08/09/2010, 10h10

Salut,

Désolé j'ai oublié de préciser que j'utilise un jsonreststore avec l'attribut cacheByDefault à true.

Et pour mon grid qui utilise ce store j'applique une query avec queryOptions = cache:true.
J'ai besoin quelques fois qu'il fasse une requete au serveur même si la query est déjà en cache.

J'espère que c'est un peu plus clair.

Merci

**Eric Pasquier** · 08/09/2010, 12h04

Je n'ai pas essayé, mais que se passe-t-il si tu mets cache:false (vu que tu ne veux pas utiliser le cache) ?

**jamilla** · 08/09/2010, 15h53

Et bien en fait ca marche si je met cahe:false mais cela veux dire que le résultat de mes querys ne sont plus mise en cache et donc j'ai à chaque fois une requête server.

Moi je souhaiterai avoir mes query en cache et pouvoir supprimer la cache de certaines querys lors de certaine action.

Pour le moment j'utilise clearCache sur le store mais le probleme c que la cache de toutes les queryes sont supprimées.
Est ce qu'il y'a un moyen de spécifier la query pour laquelle la cache doit être supprimé?

**Eric Pasquier** · 08/09/2010, 16h18

D'après ce que j'ai lu, oui : il suffit de mettre cache:false pour les "query" (queries) que vous ne voulez pas en cache.

Je ne connais pas votre code, mais il faudra peut être avoir 2 fonctions suivant ce que vous voulez mettre en cache ou pas.

Eric.

**jamilla** · 06/10/2010, 10h10

Bonjour,

Je suis toujours sur le même problème mais je pense que je me suis mal expliqué.

Le problème c que je souhaite pouvoir mettre en cache ma query puis a un moment donné pouvoir supprimer le cache de cette query.
Ce qui me permettrait de faire exactement le meme fetch qui cette fois fera un get et donc un acces au serveur pr me renvoyer une nouvelle reponse.

Merci pour vos réponses.

Chargement dynamique d'un datagrid [Dojo]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager