Discussion :

[viro]

Bonjour.

Sur Dojo 1.3.1.

J'ai un problème avec un grid. Quand je le rafraichis, le nombre de ligne blanches qu'il contient augmente.

Par exemple, au premier appel, j'ai une grid de X pixels de haut ( avec une ligne renseignée ).

Pour le rafraichir, j'utilise le code suivant :

Code :

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

1
2
3
4
5
6
7
    function majTable(param)
    {
      jsonStore.close();
      jsonStore._jsonFileUrl = "ventes.php?"+param;
      jsonStore.fetch();
      myGrid._refresh();
    }

Cette fonction est appelée par d'autres fonctions suite au clic sur divers boutons, par exemple :

Code :

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

1
2
3
4
5
6
7
    function changeSemaine()
    {
      var sem = dijit.byId("dlg_sem").attr("value");
      dojo.byId("titre_ventes").innerHTML="Ventes de la semaine n°"+sem;
      console.debug(sem);
      majTable("s="+sem);
    }

A chaque appel de majTable, la taille de la grid grandit : 2 X, 3 X, etc.
Si quelqu'un a une idée pour empêcher cela, je suis preneur.

Le store et la grid sont définis comme suit :

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
    <span  dojoType="dojo.data.ItemFileReadStore"
           clearOnClose="true"
           id="jsonStore"
           jsId="jsonStore"
           url="ventes.php?j=today">
    </span>
 
<!--     La table des ventes par magasin -->
    <table dojoType="dojox.grid.DataGrid"
           store="jsonStore"
           query="{ mm: '*' }"
           style="width : 100%;"
           id="myGrid"
           jsId="myGrid"
           onRowClick="clicLigne"
           selectionMode="single" >

Le store et la grid sont dans une page indépendante qui est chargée dans un div :

Code :

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

1
2
3
4
5
6
7
8
  <div id="zoneclient"
       dojoType="dojox.layout.ContentPane"
       region="center"
       splitter="true">
    <blockquote>
      Bienvenue..
    </blockquote>
  </div>

par la fonction suivante :

Code :

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

1
2
3
4
    function ldh(page)
    {
      dijit.byId('zoneclient').attr('href',page+".html");
    }

...

Code :

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

1
2
3
      <ul>
        <li><a href="javascript:ldh('ventes');">Ventes</a></li>
      </ul>

Quand je clique sur ce lien, la page intérieure se recharge et la grid reprend sa taille normale.

David.

[emmanuel.remy]

Salut,

Toutes les fonctions commençant par un "_" sont considérées comme private ou protected, donc tu court-circuites certainement les mécanismes de Dojo (je dis certainement car il peut quand même s'agir d'un bug )

Essaie plutôt:

Code :

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

grid1.setStore(store, query, queryOptions);

qui fait tout correctementy. Et à ta place je recréerais un nouveau store avant de détruire l'ancien.

ERE

[viro]

Merci beaucoup de tes conseils.

Si je fait ça, que devient le store créé par l'arborescence html ?
Suis-je obligé de créer le store initial par javascript ?

[viro]

Pour info, j'utilisais la fonction refresh comme indiqué sur cet article :

Rafraîchir un itemfilereadstore (dojocampus.org)

[emmanuel.remy]

Merci beaucoup de tes conseils.

Si je fait ça, que devient le store créé par l'arborescence html ?
Suis-je obligé de créer le store initial par javascript ?

Le store créé par l'arborescence HTML est un store javascript comme un autre. En effet le doc HTML est parsé et le store est créé comme si tu l'avais écrit toi-même en Javascript.

Donc si tu as associé une variable jsId à ton store, tu peux en théorie la réutiliser. Mais pour des raisons de code clean, tu devrais créer ton nouveau store, l'affecter à la grid, puis refermer l'ancien devenu inutile.

ERE

[emmanuel.remy]

Re,

Pour info, j'utilisais la fonction refresh comme indiqué sur cet article :

Rafraîchir un itemfilereadstore (dojocampus.org)

Disons que je ne suis pas trop d'accord avec leur façon de procéder: effectivement on peut court-circuiter les étapes mais utiliser ces fonctions ainsi pose des questions: est ce que les connections de la grid aux événements du store sont conservées, ces fonctions privées seront elles présentes dans la prochaine version etc... ?

D'un autre côté la fonction setStore est fournie par la grid, pourquoi s'en priver, d'autant plus que elle, elle s'occupe de couper proprement tout lien avec le store initial avant de refaire ces mêmes connections ?

Source Dojo:

Code :

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

1
2
3
4
5
	setStore: function(store, query, queryOptions){
		this._setQuery(query, queryOptions);
		this._setStore(store);
		this._refresh(true);
	}

ERE

[viro]

Ce qui me gène c'est de devoir créer un nouveau store à chaque fois. Parce que je suis un peu paumé du coup :

J'ai fait une première modif où j'ai créé le store par javascript au lieu de le créer par markup :

Code :

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

1
2
3
4
5
  <script type="text/javascript">
 
    var jsonStore = new dojo.data.ItemFileReadStore({
      url: "ventes.php?j=today"
    });

Jusque là, ca marche.

Ensuite, l'idée c'est de modifier majTable, je suppose que ca va commencer comme cela :

Code :

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

1
2
3
4
5
6
    function majTable(param)
    {
      var newStore = new dojo.data.ItemFileReadStore({
        url: "ventes.php?"+param
      });
 .....

Bah le mieux c'est que j'essaie

[emmanuel.remy]

Ce qui me gène c'est de devoir créer un nouveau store à chaque fois. Parce que je suis un peu paumé du coup :

J'ai fait une première modif où j'ai créé le store par javascript au lieu de le créer par markup :

Code :

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

1
2
3
4
5
  <script type="text/javascript">
 
    var jsonStore = new dojo.data.ItemFileReadStore({
      url: "ventes.php?j=today"
    });

Jusque là, ca marche.

Ensuite, l'idée c'est de modifier majTable, je suppose que ca va commencer comme cela :

Code :

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

1
2
3
4
5
6
    function majTable(param)
    {
      var newStore = new dojo.data.ItemFileReadStore({
        url: "ventes.php?"+param
      });
 .....

Bah le mieux c'est que j'essaie

Sûr, le mieux c'est d'essayer. Et au passage, si tu n'as pas des tonnes de données à descendre, pourquoi ne pas tout mettre dans un seul store et de filtrer en utilisant un grid.setQuery(...) ou grid.filter(...).

Enfin, cerise sur le gâteau, si tu as trop de données pour ne pas pouvoir faire comme ci-dessus, alors potentiellement tu n'utilises pas le store adapté: il te faudrait peut-être plutôt utiliser un dojox.data.QueryReadStore dont les fetch ne sont pas faits en local mais génèrent une requête vers le server (méconnu, mais extra).

ERE

[viro]

EDIT: Réponses à Emmanuel

Je ne lis pas tout dans le store parce que les données sont susceptible d'être nombreuses à terme, et surtout elle sont mise à jour régulièrement.

Quand à l'utilisation d'un itemFileReadStore plutot qu'un queryReadStore, il se trouve que j'apprend à utiliser dojo au fur et à mesure des tutoriels, et exemples que je lis, et je suis loin d'être expérimenté en javascript aussi. itemFileReadStore me parraissait plus simple.
FIN EDIT.


Après avoir modifié le code comme suit, je retrouve exactement le même problème: la grid voit sa hauteur augmenter après chaque appel de majTable.

Je ne comprends pas

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
    var jsonStore = new dojo.data.ItemFileReadStore({
      url: "ventes.php?j=today"
    });
 
    function formatMonetaire(param)
    {
      return (param+" €");
    }
 
    function majTable(param)
    {
      var newStore = new dojo.data.ItemFileReadStore({
        url: "ventes.php?"+param
      });
      myGrid.setStore(newStore);
    }
 
    function changeJour()
    {
      var rawdate = dijit.byId("dlg_date").attr("value");
      var date = dojo.date.stamp.toISOString(rawdate,{selector: "date"});
      dojo.byId("titre_ventes").innerHTML="Ventes du jour : "+date;
      console.debug(date);
      majTable("j="+date);
/*      var date = dojo.date.locale.parse( rawdate, {datePattern: "yyyy-MM-dd", selector: "date"} );
      console.log(date);*/
    }

[emmanuel.remy]

Désolé, mais je n'arrive pas à reproduire ton bug

Je réessaierai ce soir.

ERE

[viro]

Pas vraiment résolu, mais j'ai mis la propriété autoHeight à true dans le grid, et le grid ne contient plus que des lignes utiles.

Pas exactement ce que je voulais, mais ca me convient.

[emmanuel.remy]

Pas vraiment résolu, mais j'ai mis la propriété autoHeight à true dans le grid, et le grid ne contient plus que des lignes utiles.

Pas exactement ce que je voulais, mais ca me convient.

C'est sûr que c'est mieux que rien...

ERE