Discussion :

[DiverSIG]

Bonjour,

j'ai un panel avec dans la partie gauche un treepanel. A chaque item du treepanel, j'ai une case à cocher.
je voudrais que quand je coche un item qui est un dossier, tous les fils de ce noeuds se cochent aussi.

j'ai vu une fonction recursive qui est censée faire cela:

Code :

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

1
2
3
4
5
6
7
8
9
10
function toggleCheck(node, isCheck) {
	if (node) {
		var args = [isCheck];
		node.cascade(function(){
					c = args[0];
					this.ui.toggleCheck(c);
					this.attributes.checked = c;
					}, null, args);
	}
}

mais elle plante avec le message:

Code :

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

too much recursion

pourtant, mon arbre n'a que 3 niveaux...

ensuite j'ai essayé de récupérer les fils du noeud sélectionné avec la propriété childNodes et de leur mettre le propriété checked à true.
ça marche, mais je voudrais que l'affichage se mette à jour aussi.
comment faire?


Merci,

Nico

[JulienFio]

Bonjour,

A la fin de ta boucle où tu mets la propriété checked à true sur tous les fils, pourquoi ne pas faire un reload de ton store ?

[DiverSIG]

j'ai défini la racine de mon arbre:

Code :

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

var racine = new Ext.tree.TreeNode({text:'Mon arbre'});

ensuite je le construit en ajoutant des sous-répertoires avec la fonction appendChild.

ensuite je déclare mon treePanel :

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
tree = Ext.tree.TreePanel({
				region: "west",
				border: false,
				animate: true,
				autoWidth: true,
				enableDD: true,
				lines: true,
				rootVisible: false,
				root:racine,
				listeners: {
					'checkchange': function(node, checked) { 
 
									if (node.isLeaf()) {	// si c'est une feuille
										// blabla bla
									}
									else {
										for (i=0; i<node.childNodes.length; i++) {
											var c = node.childNodes[i];
											c.attributes.checked = checked;
										}
										this.root.reload();
 
									}
					}
				}
	});

mais j'ai un message d'erreur

Code :

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

this.root.reload is not a function

qu'est ce que j'ai oublié?
ou alors je m'y prend mal pour construire mon arbre ?

Nico

[JulienFio]

Ton erreur notifie que tu ne peux pas utiliser la méthode reload sur ton objet root.. Ce n'est pas ta racine que tu souhaite 'reloader' mais ton store.

Utilises le reload sur ton store et non ta racine.

[DiverSIG]

il doit me manquer un composant, parce que je vois pas où j'ai une méthode store :
mon objet TreePanel est ensuite mis dans un Panel avec d'autres composants, et ce Panel est mis dans la partie center d'un viewport.

j'ai vu un objet Ext.data.Store, mais je vois pas comment l'utiliser avec mon TreePanel...

Nico

[JulienFio]

Sais-tu ce qu'est un Store ? Ce n'est pas une méthode mais un objet. Grosso merdo ton TreePanel ne peux pas afficher de données si tu ne lui dis pas quelles sont ces données à afficher. Ton Store est en fait un JSON qui va alimenter ton arbre (Sais-tu ce qu'est un JSON ?). La première chose à faire c'est de générer un JSON correct

Je t'invites à regarder les exemples officiels: Exemples ExtJs
Mais aussi de faire un tour sur l'API: API ExtJs 3.3.1


Un exemple perso

Code :

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

1
2
3
4
5
6
7
storeLoader = new Ext.tree.TreeLoader({
        dataUrl: '<%=request.getContextPath()%>/servlet/com.sharedvalue.servlet.inet.http.moveTo', //URL de ma servlet qui génère mon JSON
        baseParams: {MNEMO: 'FPOSTE_REPERE', SP: '<%=userSession.getCurrentSpace()%>', ROLE: '<%=userSession.getCurrentRole()%>', ACTION: 'GETJSON', ID: '<%=sId%>', idPrFather: '<%=idPrFather%>', idPrType: '<%=idPrType%>'},
        uiProviders:{
            'col': Ext.ux.tree.ColumnNodeUI
        }
    });

Code :

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

1
2
3
4
5
6
var root = new Ext.tree.AsyncTreeNode({
        id: '0',
        text: 'source', //texte du noeud
        allowDrag: false,
        allowDrop: false
    });

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
posteRepereCompetenceTree = new Ext.ux.tree.TreeGrid({
        title: 'monTitle',
        id: 'monId',
        width: monWidth,
        height: monHeight,
        renderTo: 'monRender',
        enableDD: true,
        rootVisible: false,
        animate: true,
        enableSort: false,        
        autoScroll: true,
        loader: storeLoader, //Il te manque ça !
        root: root,
        columns: [...
        ],
       ...
    });