Appliquer le lazy loding sur un tree view

Version imprimable

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:

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 .

29/10/2009, 13h33
emmanuel.remy

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
30/10/2009, 11h56
devkaty

Salut ,

Merci pour votre réponse .

J'ai essayé les deux solutions mais malheuresement ca marche pas :cry:, 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 .

++
30/10/2009, 12h13
emmanuel.remy

Salut,

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

Citation:

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:

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:

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 .

30/10/2009, 14h08
emmanuel.remy

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

ERE
30/10/2009, 14h48
devkaty

Citation:

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 .
30/10/2009, 16h59
emmanuel.remy
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:

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

Salut ,

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

j'ai fait ce code

Code:

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 ?

27/11/2009, 00h42
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
27/11/2009, 12h34
devkaty

Citation:

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é
:( .
27/11/2009, 20h34
emmanuel.remy

Re,

A part l'exemple fourni par Dojo je n'en connais pas d'autre :?

Je suis en cours d'écriture d'un article sur les stores et je tâcherai d'aborder ce point.

ERE
02/12/2009, 10h52
devkaty

Ok , merci .