Appliquer le lazy loding sur un tree view

**devkaty** · 20/10/2009, 13h04

Salut ;

J'utilise la version 1.3 de dojo , j'ai un tree view et je veux appliquer le lazy loading sur les items de tree , j'utilise zend frame work j'ai une action qui me renvoi le data store comme ça :

Code :

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

1
2
3
4
5
"{label:"name",
identifier:"num",
items: [{"num":"1","name":"aaa","type":"dossier",
"children":[{"num":"2","name":"lllll","pere":"1","type":"dossier",
"children":[{"num":"4","name":"bbb","pere":"2","type":"page",}]}]}]"

je veux que ce store se charge progressivement lors du click sur le plus(+) du tree.

J'ai essaye avec le widget dojox.data.JsonRestStore mais j'ai pas réussi

Merci d'avace .

**emmanuel.remy** · 29/10/2009, 13h33

Salut,

Deux solutions: à la main en se basant par exemple sur cette démo intégré à Dojo: dojox\data\demos\demo_LazyLoad.html

Ou par JSON-REST, dont un excellent article est ici http://blog.medryx.org/2008/07/24/js...tore-overview/

ERE

**devkaty** · 30/10/2009, 11h56

Salut ,

Merci pour votre réponse .

J'ai essayé les deux solutions mais malheuresement ca marche pas

, j'ai trouvé des dificultés d'integer les exemple dans mon projet , par ce que j'ai une action qui me renvoi les donnée a partir du serveur et j'ai une tree qui a créé dans page HTML , et j'ai des fichiers js .

++

**emmanuel.remy** · 30/10/2009, 12h13

Salut,

Tu peux préciser les problèmes que tu rencontres ? Ils sont dus à Zend ?
ERE

**devkaty** · 30/10/2009, 12h28

Envoyé par emmanuel.remy

Salut,

Tu peux préciser les problèmes que tu rencontres ? Ils sont dus à Zend ?
ERE

La 1ere solution que j'ai tésté c'est : utilisation de se widget dojox.data.JsonRestStore mais malheusement j'ai pas réussi de l'appliquer sur mon projet a cause du maniére d'ecriture du store plus exactement il ya une variable s'appel $_ref

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
#
{"shipToAddress","299 Chestnut Ridge",
#
  "active":true,
#
  "shippingMethod":"UPS",
#
  "customer":{"$ref":"/Customer/johndoe", "name": "John Doe"},
#
  "items":[{"quantity":1, "product":{"$ref":"/Product/sillyputty"}}],
#
  "purchaseDate":""2008-11-11T13:27:44Z",
#
 "id":"3433"}

et je sais pas c'est ça le probleme par ce que moi je créé mon strore a partir d'un tableau cree en php contient tous les elements et leurs childs.

Apres j'ai créé ce code qui utilise les deux methodes de dojo.data.ItemFileReadStore : isItem et isItemLoaded et loadItem sur un store statique (le store recuperer par mon action) mais je savais comment l'applique sur le tree , j'ai pensé de créé une widget mais j'ai pas encors faite.

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
 
<script>
var store = new dojo.data.ItemFileReadStore({data : <?php echo $this->treeData ?> });
console.log("start fction");
 
//Load completed function for walking across the attributes and child items of the
//located items.
var gotElements = function(items, request){
//Cycle over all the matches.
for(var i = 0; i < items.length; i++){
   var item = items[i];
  //Cycle over all the attributes.
  var attributes = store.getAttributes(item);
 
  for (var j = 0; j < attributes.length; j++){
 
    //Assume all attributes are multi-valued and loop over the values ...
    var values = store.getValues(item, attributes[j]);
 
    for(var k = 0; k < values.length; k++){
 
      var value = values[k];
 
      if(store.isItem(value)){
 
        //Test to see if the items data is fully loaded or needs to be demand-loaded in (the item in question is just a stub).
        if(store.isItemLoaded(value)){
 
          console.log("Located a child item with label: [" + store.getLabel(value) + "]");
        }else{
 
 
          //Asynchronously load in the child item using the stub data to get the real data.
          var lazyLoadComplete = function(item){
            console.log("Lazy-Load of item complete.  Located child item with label: [" + store.getLabel(item) + "]");
          }
          store.loadItem({item: value, onItem: lazyLoadComplete });
        }
      }else{
 
        console.log("Attribute: [" + attributes[j] + "] has value: [" + value + "]");
      }
    }
  }
}
}
//Call the fetch of the toplevel continent items.
store.fetch({query: {type: "dossier"}, onComplete: gotElements});
</script>

En fin , mon vrai probleme c'est de trouvé une solution adaptable a se que j'ai et l'integrer se solution dans mon projet .

Merci .

**emmanuel.remy** · 30/10/2009, 14h08

Dans le cas du dojox.data.JsonRestStore, as tu compris l'utilisation de $ref, qui permet le lazyloading ?

ERE

**devkaty** · 30/10/2009, 14h48

Envoyé par emmanuel.remy

Dans le cas du dojox.data.JsonRestStore, as tu compris l'utilisation de $ref, qui permet le lazyloading ?

ERE

Non j'ai pas compris le fonctionnement du $ref ya pas d'explication

.
pour ça j'ai pensé à l'autre solution .

**emmanuel.remy** · 30/10/2009, 16h59

A chaque appel REST (GET, POST, PUT, ...), ton fichier cible php est exécuté.
Si dans ta structure JSON renvoyée tu inscris par exemple:

Code :

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

1
2
3
4
 
...
 "customer":{"$ref":"/Customer/johndoe", "name": "John Doe"},
...

alors il va exécuter un nouvel appel REST en envoyant comme id "/Customer/johndoe", afin de charger les informations relatives à johndoe. Le $ref est donc là pour déclencher le LazyLoading.

ERE

**devkaty** · 24/11/2009, 17h17

Salut ,

je suis toujours sur la lazy loading , j'ai pas encors trouvé une solution.

j'ai fait ce code

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
 
var store = new dojo.data.ItemFileReadStore({url: "countries.json"});
 
//Load completed function for walking across the attributes and child items of the
//located items.
var gotContinents = function(items, request){
  //Cycle over all the matches.
  for(var i = 0; i < items.length; i++){
    var item = items[i];
 
    //Cycle over all the attributes.
    var attributes = store.getAttributes(item);
    for (var j = 0; j < attributes.length; j++){
      //Assume all attributes are multi-valued and loop over the values ...
      var values = store.getValues(item, attributes[j]);
      for(var k = 0; k < values.length; k++){
        var value = values[k];
 
        if(store.isItem(value)){
          //Test to see if the items data is fully loaded or needs to be demand-loaded in (the item in question is just a stub).
          if(store.isItemLoaded(value)){
            console.log("Located a child item with label: [" + store.getLabel(value) + "]");
          }else{
            //Asynchronously load in the child item using the stub data to get the real data.
            var lazyLoadComplete = function(item){
              console.log("Lazy-Load of item complete.  Located child item with label: [" + store.getLabel(item) + "]");
            }
            store.loadItem({item: value, onItem: lazyLoadComplete});
          }
        }else{
          console.log("Attribute: [" + attributes[j] + "] has value: [" + value + "]");
        }
      }
    }
  }
}
//Call the fetch of the toplevel continent items.
store.fetch({query: {type: "continent"}, onComplete: gotContinents});

avec ce code il recupere juste les elements fils , ca que je veux c'est appeler ce code sur mon tree avec un evenement par exemple .c-a-d lorsque je click sur le plus il appel une methode avec requete ajax permet de charger juste les elements fils d'élément ou j'ai cliqué .Est ce que possible de faire ça avev se code ?

**emmanuel.remy** · 27/11/2009, 00h42

Salut devkaty,

Je t'ai passé une solution à base de REST. Pourquoi ne pas l'utiliser surtout que tu as toutes les infos et des exemples dans dojo. Je penses que ton principal souci c'est avant tout de prendre un peu de temps pour comprendre REST. Et crois moi ce n'est pas du temps perdu...

ERE

**devkaty** · 27/11/2009, 12h34

Envoyé par emmanuel.remy

Salut devkaty,

Je t'ai passé une solution à base de REST. Pourquoi ne pas l'utiliser surtout que tu as toutes les infos et des exemples dans dojo. Je penses que ton principal souci c'est avant tout de prendre un peu de temps pour comprendre REST. Et crois moi ce n'est pas du temps perdu...

ERE

Salut ,

Merci pour la réponse,

j'ai pas trouvé des exemples détaillés ou bien contenant des explications, ou bien quelque chose qui semble a ce que j'ai déja fait par ce que j'ai déja créé le tree avec HTML et j'ai une action qui me renvoi le data store , alors je sais pas quoi je dois modifé

.