[Dojo] Générer tree à partir d'un store

Générer tree à partir d'un store

Salut,

Je générais jusqu'ici mon store à partir d'un fichier json, lui-même généré par un fichier PHP, mais je trouve cette solution lourde car difficile à maintenir au niveau de l'accumulation des fichiers json et des risques de mise en cache.

J'ai donc décidé de générer le même store à partir d'une chaîne JSON récupére par l'appel à mon script PHP via un dojo.xhrGet.

Seulement, même si la chaîne est valide et tout et tout, j'ai une erreur dans Firebug, et le tree ne s'affiche pas.

L'erreur:

Citation:

[Widget dijit.Tree, arbre] srcNodeRef=div#arbre _connects=[5] : error loading root children: TypeError: this._arrayOfTopLevelItems is undefined message=this._arrayOfTopLevelItems is undefined

La seule chose qui a changé, c'est le store.
Je fais ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var sourceStore = dojo.xhrGet({
                                    url: "../ajax/makeStore.php?id_site=" + id_site,
                                    handleAs: "json",
                                    load: function(data){
                                        console.log(data);
                                        return data;
                                    },
                                    error: function(error){
                                        alert(error);
                                    }
                                });
            var store = new dojo.data.ItemFileWriteStore({
                data: sourceStore
            });

Tandis qu'avant, je faisais ça:

Code:

1
2
3
var store = new dojo.data.ItemFileWriteStore({
               url: "1107.json"
            });

Pour info, voici d'autres bouts de code qui peuvent aider.

La chaîne JSON récupérée(valide d'après JSONLint.com):

Code:

1
2
3
4
{"identifier": "id","label": "nom","items":[{"id":"21","nom":"Test","id_site":"1107","id_parent":"0"
,"enfants":[{"id":"22","nom":"Test2","id_site":"1107","id_parent":"21","enfants":[{"id":"24","nom":"Test4"
,"id_site":"1107","id_parent":"22"}]},{"id":"25","nom":"Test5","id_site":"1107","id_parent":"21"}]},
{"id":"23","nom":"Test3","id_site":"1107","id_parent":"0"}]}

Et enfin, l'arbre:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
var treeModel = new dijit.tree.ForestStoreModel({
            store: store,
            id: "model",
            query: {"id" : "*"},
            rootId: "root",
            rootLabel: "Dossiers",
            childrenAttrs: ["enfants"]
        });
 
        var tree = new dijit.Tree({
                        model: treeModel,
                        onClick: function(item){selectedItem = item}
                    }, "arbre");

EDIT
-----

Je viens de faire un test en réutilisant le fichier .json, dans lequel j'ai collé la chaîne retournée par xhrGet, et ça fonctionne.

Donc a priori ça ne devrait pas être un souci de malformation du json.

Pour commencer

Salut *.Har(d)t,

Regarde ton source que je t'ai commenté:
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 //Là tu déclares un appel AJAX donc ** ASYNCHRONE ** //sourceStore est donc un DeferredObject var sourceStore = dojo.xhrGet({ url: "../ajax/makeStore.php?id_site=" + id_site, handleAs: "json", load: function(data){ console.log(data); return data; }, error: function(error){ alert(error); } }); /** * et la tu construis ton VRAI store * 2 problèmes: * - la ligne de code précédente tu es asynchrone, donc il y a de très fortes * chances que ton store cherche à être construit alors que l'appel * précédent n'est pas terminé (problématique AJAX, pas spécialement * DOJO) * - ensuite tu affectes sourceStore à data, alors que sourceStore ne * représente pas les données, mais le DeferredObject */ var store = new dojo.data.ItemFileWriteStore({ data: sourceStore });
Citation:
Tandis qu'avant, je faisais ça:
Code:

1 2 3 var store = new dojo.data.ItemFileWriteStore({ url: "1107.json" });
Là tout est vu comme étant synchrone (même si ce n'est pas l'exacte vérité) , donc pas de souci.
L'affectation url: "1107.json" déclenchera le téléchargement des données et l'affectation à data

Enfin, avant de te proposer une solution, note que le chargement de ta page induit des allers-retours avec le server pour obtenir les données JSONS, ce qui peut produire des performances dégradées ;) si tu dois charger plusieurs stores de la même manière.

D'après ton code, le store que tu crées l'est au chargement de la page et ne semble plus être rechargé. Si tel est le cas, la solution la plus simple et la plus rapide est celle-ci:
Code:

1 2 3 4 5 6 var store = new dojo.data.ItemFileWriteStore({ data: /* ICI LES DONNEES JSON, TOUT SIMPLEMENT QUELQUE CHOSE DU STYLE */ <?php echo getDataJson() ?> });
soit dans ton cas cela produira (et là tu vas t'en vouloir tellement c'est plus simple qu'un téléchargement Ajax ;) ):
Code:

1 2 3 4 5 6 7 8 9 var store = new dojo.data.ItemFileWriteStore({ data: {"identifier": "id", "label": "nom", "items":[{"id":"21","nom":"Test", "id_site":"1107", "id_parent":"0", "enfants":[{"id":"22","nom":"Test2","id_site":"1107","id_parent":"21","enfants":[{"id":"24","nom":"Test4" ,"id_site":"1107","id_parent":"22"}]},{"id":"25","nom":"Test5","id_site":"1107","id_parent":"21"}]}, {"id":"23","nom":"Test3","id_site":"1107","id_parent":"0"}]} });
Maintenant si tu veux quand même conserver l'aspect asynchrone du xhrGet alors va falloir enchainer les taches dans le bon ordre. Mais c'est un autre sujet.

A+,

ERE

EDIT
Tu as aussi la possibilité de faire un appel xhrGet synchrone mais je n'en vois pas l'intérêt ici, si tu es au chargement de ta page comme je le pense.

Arf, merci :)

J'ai toujours le même problème avec ces histoires de synchrone/asynchrone, j'ai un peu de mal.