Dojo tree et evènement OnClik

**kanabzh29** · 09/02/2010, 16h30

Bonjour,

J'ai un problème avec la gestion d'un évènement onClick sur un Dojo.tree.
En effet, pour faire simple, le alert ne se fait pas au "onclick" mais au chargement, de plus lorsque je clique j'ai un message d'erreur :

"this.onClick is not a function"

Voila mon 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
 
<script type="text/javascript">
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dijit.Tree");
 
    dojo.addOnLoad(function() {
 
        var store = new dojo.data.ItemFileReadStore({
            url: "/customer/json/"
        });
 
        var treeModel = new dijit.tree.ForestStoreModel({
            store: store,
            query: {
                "type": "customer"
            },
            rootId: "root",
            rootLabel: "Customers",
            childrenAttrs: ["children"]
 
        });
 
        var tree = new dijit.Tree({
            model: treeModel,
            labelAttr: name,
            showRoot: false,
            onClick: alert('hello')
        },
        "treeOne");
 
 
    });
</script>
 
<div id="treeOne"></div>

Si quelqu'un pouvait m'aider.

**vermine** · 09/02/2010, 16h36

Bonjour,

Essayez ceci:

Code :

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

1
2
_onClick: alert('hello')

**kanabzh29** · 09/02/2010, 16h37

Le Alert s'affiche dès le chargement, le tree ne s'affiche plus et j'ai cette erreur :

Code :

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

1
2
 
uncaught exception: dojo.hitch: scope["_onClick"] is null (scope="[Widget dijit.Tree, treeOne]")

**vermine** · 09/02/2010, 16h48

Je tatonne, hein, je n'ai pas de quoi tester donc je ne fais que proposer des solutions:

Code :

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

1
2
_onClick: "alert('hello')"

**kanabzh29** · 09/02/2010, 16h51

Ben alors grand merci, et ça avance.
Plus d'alertes au chargement mais une erreur incompréhensible lors du clic :

Code :

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

1
2
 
_b2[_b3].apply is not a function

**vermine** · 09/02/2010, 16h55

Arf ,ne faudrait-il pas faire qqch du genre:

Code :

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

1
2
 
_onClick: function (){ alert('hello'); }

C'est ma dernière tentative pour aujourd'hui. Désolé.

Il faut peut-être un "new" devant function.

**kanabzh29** · 09/02/2010, 17h02

IT WORKS .... yeeaaaah

Merci encore

**kanabzh29** · 10/02/2010, 16h11

Bonjour,

Je reviens sur ce post, car j'ai un petit problème.
Le OnClick fonctionne correctement, malheureusement j'aimerais récupérer le nom et l'id de l'item sélectionner, et je n'y arrive pas.

Voila mon 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
 
<script type="text/javascript">
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dijit.Tree");
 
    dojo.addOnLoad(function() {
 
        var store = new dojo.data.ItemFileReadStore({
            url: "/customer/json/"
        });
 
        var treeModel = new dijit.tree.ForestStoreModel({
            store: store,
            query: {
                "type": "customer"
            },
            rootId: "root",
            rootLabel: "Customers",
            childrenAttrs: ["children"]
        });
 
        var tree = new dijit.Tree({
            model: treeModel,
            labelAttr: name,
            showRoot: false,
            _onClick: function(item) {selectedItem = item;alert(selectedItem);}
        },
        "treeOne");
 
 
    });
</script>
 
<div id="treeOne"></div>

lorsque je clique sur un item, j'ai cette alert :

Code :

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

1
2
 
[object MouseEvent]

Le jSon ressemble à cela :

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
 
{ 
	identifier: 'id',
	label: 'name',
	items: [
	{ 
		id: 'CU_10766' , 
		name: '1 ET 1 FONT 6', 
		type: 'customer',
		children:[{_reference: 'CA_1477110766'},{_reference: 'CA_2302310766'},{_reference: 'CA_2302410766'}]},
	{ 
		id: 'CA_1477110766' ,
		name: '1 ET 1 FONT 6_1\'\'53\"', 
		type: 'campaign'
	},
	{ 
		id: 'CA_2302310766' ,
		name: 'mais non', 
		type: 'campaign'
	},
	{ 
		id: 'CA_2302410766' ,
		name: 'mais non', 
		type: 'campaign'
	},
	{ 
		id: 'CU_10266' , 
		name: '2 BE 3', 
		type: 'customer',
		children:[{_reference: 'CA_1408310266'},{_reference: 'CA_2302510266'}]},
	{ 
		id: 'CA_1408310266' ,
		name: 'CLIP', 
		type: 'campaign'
	},
	{ 
		id: 'CA_2302510266' ,
		name: 'test de janvier', 
		type: 'campaign'
	}]}

et donc j'aimerais récupérer seulement les id et name des "campaign" quand je clique dessus, et nom pas les id et name des "customer"

**vermine** · 10/02/2010, 16h19

Là il va falloir attendre le passage de quelqu'un d'autre car sans environnement de test, je ne sais pas vous répondre.
J'ai envie de remplacer item par this et de faire une sorte de:

Code :

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

1
2
 
selectItem = this.selectedItem();

Mais je ne sais pas si ça existe, ni même la synthaxe...

**kanabzh29** · 10/02/2010, 16h26

J'ai essayé pour tester et non il me crache une erreur :

Code :

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

1
2
 
this.selectedItem is not a function

**vermine** · 10/02/2010, 16h34

item c'était pas mal, finalement.

Code :

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

1
2
 
item.selectedItem

Mais bon, pas sûr de la synthaxe encore une fois...

**moukit233** · 10/02/2010, 16h34

Salut,

essayer avec :

Code :

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

1
2
3
4
5
 
// pr recuperer l'item selectionner
item = idDeTonTree.lastFocused.item; 
//pr recuperer la valeur d'un colonne ds store
var valeurColonne  = idDeTonTree.model.store.getValue(item,"nomColonneDsStore");

**kanabzh29** · 10/02/2010, 16h43

c'est bizarre, j'ai mis :

Code :

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

1
2
3
 
item = treeOne.lastFocused.item;
							var valeurColonne  = treeOne.model.store.getValue(item,"type");

"treeOne" étant censé être l'iD de mon tree et il me sort l'erreur :

Code :

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

1
2
3
 
treeOne is not defined
item = treeOne.lastFocused.item;

**vermine** · 10/02/2010, 16h48

Et tree tout court ?

**Daniel_Gibot** · 10/02/2010, 17h13

Tout en etant moi aussi sans moyen de tester, j'utilise plutot cette methode afin de realiser des evenements onclick sur mes boutons :

Code :

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

1
2
3
4
 
dojo.connect(dijit.byId("monTree"), "onClick", function(){
alert(dijit.byId('monTree').selectedItem);
});

Ou pour mes datagrid :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<script type="dojo/method" event="onRowClick" args="evt">
var items = tableau.selection.getSelected();
	if (items.length) {
		dojo.forEach(items, function(selectedItem) {
		if (selectedItem !== null) {
		         dojo.forEach(tableau.store.getAttributes(selectedItem), function(attribute) {
		          var value = tableau.store.getValue(selectedItem, attribute);
		          alert(value);				
		          }); // end forEach			
		} // end if
		}); // end forEach
	} // end if
	</script>

Ce sont des propositions d'evenements click. Apres je ne sais pas si ca peut s'adapter a un tree.

**moukit233** · 10/02/2010, 17h16

Envoyé par kanabzh29

c'est bizarre, j'ai mis :

"treeOne" étant censé être l'iD de mon tree et il me sort l'erreur :

soit tu definit un jsid pr ton tree :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
var treeModel = new dijit.tree.ForestStoreModel({
            store: store,
            query: {
                "type": "customer"
            },
            jsid : "treeOne",
            rootId: "root",
            rootLabel: "Customers",
            childrenAttrs: ["children"]
        });

ou bien :

Code :

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

1
2
3
4
 
var treeOne = dijit.byId("treeOne");
item = treeOne.lastFocused.item;
var valeurColonne  = treeOne.model.store.getValue(item,"type");

**kanabzh29** · 10/02/2010, 17h24

en mettant simplement "tree" comme l'a signalé 'vermine', cela fonctionne.

Mais cela fonctionne partout...je veux dire par la que lorsque je clique a l'extérieur du tree, il me sort une alert aussi, et quand je clique sur le "plus" pour ouvrir un dossier du tree, il ne s'ouvre pas mais affiche une alerte.

MEeeeeeerci.

**vermine** · 11/02/2010, 08h55

Ben de rien, j'aime foutre le bordel.

Je cherchais le jsId comme moukit. Le jsId auto-déclare une variable Javascript globale qui est votre widget dojo. Tandis que la méthode .selectedItem proposée par Daniel et moi-même semble être la méthode qu'il vous faut. Je dis bien semble car encore une fois, je ne travaille pas en Dojo, je ne fais que lire le forum et la bibliothèque.

**moukit233** · 11/02/2010, 14h31

Re,
oui tu as raison

J'ai pas fait attention qu'il a créé le widget programmatical

Désolé

**Daniel_Gibot** · 11/02/2010, 15h03

Bon je pense avoir trouvé ce que tu cherches a faire. J'ai pris un exemple du site de dojo et j'ai fouiné un peu

A partir du onclick que vous aviez trouvé précédemment.

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
 
onClick: function(item){
	liste = "";
	if(typeof(item.label) !="undefined"){
		alert("nom = "+item.label+" id = "+item.id);
	} else {
		alert("nom = "+item.name+" id = "+item.id);
	}
	//Liste tous les objets de l'item selectionne
	for(objet in item){
		liste += objet+"\r\n";
	}
	alert(liste);
	//Liste tous les objets de l'item selectionne
}