Discussion :

[andlio]

Bonjour à tous,

Décidement mes débuts avec Dojo sont chaotiques.Je voudrais pouvoir recharger un widget Tree après un clic sur un bouton.

J'ai donc une liste de boutons qui correspondent à la version des données à afficher dans le tree. L'url pour récupérer les données (JSON) va changer en fonction de cette version. Elle est de la forme "plans/v{version}" (par exemple "plans/v1" pour la version 1).
Le clic sur le bouton doit donc mettre à jour mon JSonRestStore avec la bonne url puis recharger le widget Tree.

Mais je n'y arrive pas...

Voici comment je créé mon Store et mon Tree

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
// Create the store
this.planItemsStore = new dojo.store.JsonRest({
	target:this.planItemsStoreTarget,
	clearOnClose:true,
	getChildren: function(object, onComplete, onError){
		//...
	},
	getLabel: function(object){
		//...
	},
	getRoot: function(onItem, onError){
		//...
	},
	mayHaveChildren: function(item){
		//...
	},
});
 
// Create the tree
this.planTree = new dijit.Tree({
	model: this.planItemsStore, // give it the model
	openOnClick:true,
	getIconClass: function(item, opened) {
		//...
	},
	onClick:dojo.hitch(this, function(item, node, evt){
		//...
	}),
},
"tree"); // target HTML element's id
 
this.planTree.startup();

Voici comment je mets à jour this.planItemsStore.target :

Code :

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

this.planItemsStore.target = "ma_nouvelle_url";

J'ai trouvé ce bout de code sur Internet pour rafraichir un Tree :

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
// Credit to this discussion: http://mail.dojotoolkit.org/pipermail/dojo-interest/2010-April/045180.html
// Close the store (So that the store will do a new fetch()).
this.planTree.model.store.clearOnClose = true;
this.planTree.model.store.close();
 
// Completely delete every node from the dijit.Tree     
this.planTree._itemNodesMap = {};
this.planTree.rootNode.state = "UNCHECKED";
this.planTree.model.root.children = null;
 
// Destroy the widget
this.planTree.rootNode.destroyRecursive();
 
// Recreate the model, (with the model again)
this.planTree.model.constructor(this.planTree.model);
 
// Rebuild the tree
this.planTree.postMixInProperties();
this.planTree._load();

Mais j'obtiens l'erreur suivante :

this.planTree.model.store is undefined

Quelqu'un a-t-il déjà rencontré le même problème?

[emmanuel.remy]

Salut,

Le code que tu as trouvé est gênant: il fait notamment appel à des fonctions privées.

A mon avis l'idéal est de détruire l'ensemble (via l'appel du destroy sur ton tree, puis delete, et enfin même démarche sur le store) et de le refabriquer. Ce n'est pas délirant étant donné qu'il faut de toute façon reconstruire le store et le model puis enfin l'arbre...

ERE

[andlio]

Bonjour,

Reconstruire complètement l'arbre est la 1ère chose que j'ai essayé. Mais cela m'a posé quelques problèmes:

1. Le nœud racine (mon div contenant l'arbre) est supprimé quand j'appelle la méthode destroy()
2. En admettant que je reconstruise le nœud détruit, lorsque que je fais appelle de nouveau à la méthode createTree(), j'obtiens une erreur du type "un widget ayant l'id 'tree' est déjà référencé"

Comment donc recréer un widget avec le même id ?

[andlio]

Bon effectivement j'ai réessayé et ça marche. J'avais dû oublier quelque chose, mais quoi ?

Bref voici comment je procède maintenant : je n'appelle plus de methode refreshTree(), mais uniquement createTree(). Et à chaque appel de createTree() je vérifie que this.planItemsTree n'existe pas déjà, et si c'est le cas je le détruit.
Au final voici le résultat :

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
controllers.PlanController = {
	//...
	createTree:function(){
		// Destroy the store and the tree if already exists
		this.destroyTree();
 
		// Create the dom node is not exists
		if(dojo.byId("tree")==null){
			dojo.create("div", {id:"tree"}, dojo.byId("systems"));
		}
 
		// Create the store
		this.planItemsStore = new dojo.store.JsonRest({
			target:this.planItemsStoreTarget,
			clearOnClose:true,
			getChildren: function(object, onComplete, onError){
				//...
			},
			getLabel: function(object){
				//...
			},
			getRoot: function(onItem, onError){
				//...
			},
			mayHaveChildren: function(item){
				//...
			},
		});
 
		// Create the tree
		this.planTree = new dijit.Tree({ // create a tree
			model: this.planItemsStore, // give it the model
			openOnClick:true,
			getIconClass: function(item, opened) {
				//...
			},
			onClick:dojo.hitch(this, function(item, node, evt){
				//...
			}),
		},
		"tree"); // target HTML element's id
	},
	destroyTree:function(){
		if(this.planItemsStore!=null){
			this.planItemsStore = null;
		}
 
		if(this.planTree!=null){
			this.planTree.destroyRecursive(true);
			this.planTree = null;
		}
	},
	//...
}

Je crois que tu envois des ondes positives Emmanuel... ^^
Merci encore pour ton aide trèèèèès précieuse.

[emmanuel.remy]

Salut,

Quelques précisions: d'abord attention à ne pas confondre Model et Store. Tu écris:

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
		// Create the store
		this.planItemsStore = new dojo.store.JsonRest({
			target:this.planItemsStoreTarget,
			clearOnClose:true,
			getChildren: function(object, onComplete, onError){
				//...
			},
			getLabel: function(object){
				//...
			},
			getRoot: function(onItem, onError){
				//...
			},
			mayHaveChildren: function(item){
				//...
			},
		});
 
		// Create the tree
		this.planTree = new dijit.Tree({ // create a tree
			model: this.planItemsStore, // give it the model
			openOnClick:true,
			getIconClass: function(item, opened) {
				//...
			},
			onClick:dojo.hitch(this, function(item, node, evt){
				//...
			}),
		}

D'abord, tu vois que tu affectes un Store là où ce qui est attendu est un Model. Ok tu as ajouté les fonctions de l'interface Model dans le constructeur du Store mais c'est un peu casse-gueule: rien ne dit que la prochaine implémentation de ce store fera encore un mixin... Tu devrais plutôt écrire cet objet à part et ensuite faire le mixin avec ton Store ou bine faire un dojo.extend de dojo.store.JsonRest, ou encore mieux créer une nouvelle classe qui hérite de dojo.store.JsonRest ET de ton implémentation de Model. Je sais cela peut paraitre compliqué mais c'est ce qui t'assure un peu plus d'évolutivité ou de réutilisation de ton code (pour quasi aucune modif dans les deux premiers cas).

Ensuite attention à ne pas confondre dojo.data avec dojo.store. Ce sont l'ancienne et la nouvelle API. Or le clearOnClose n'existe pas dans le dojo.store, tu dois donc pouvoir l'enlever, il ne fait ici que décorer .

Pour être complet on peut noter que la version 1.7 de Dojo ne propose pas une implémentation du Model basée la nouvelle api des store, mais uniquement sur l'ancienne. Dommage, même s'il existe des ponts entre les deux Api.

Voilà, l'essentiel reste quand même que ton code fonctionne !

ERE

EDIT: je viens de m'apercevoir que ton code ressemble à un tutorial des Tree avec la 1.6. . Ceci explique peut-être mieux la mise en oeuvre du store que tu as faite

[andlio]

Bonjour Emmanuel,

Tout d'abord je te souhaite une excellente année 2012 ainsi qu'à tout le forum Développez.com. Je te remercie encore pour tes nombreuses contributions et aides que tu nous apportes.

Effectivement j'ai repris le tutorial sur le site officiel de dojo. Ça me paraissait bizarre aussi, mais étant tout nouveau j'ai décidé de lui faire confiance ^^