Discussion :

[JulienFio]

Bonjour,

Je débute en Extjs et je galère un peu à faire fonctionner un TreeGrid avec un JSON dynamique. voici 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
36
37
38
39
40
41
 
Ext.onReady(function() {
        Ext.QuickTips.init();        
 
        var tree = new Ext.ux.tree.TreeGrid({
            width: 800,
            height: 500,
            animate: true,
            enableDD: true,
            autoScroll: true,
            columns:[{
                header: 'Compétence',
                dataIndex: 'text',
                sortable: false,
                width: 600
            },{
                header: 'Valeur requise',
                dataIndex: 'valeurRequise',
                sortable: false,
                align: 'center',
                width: 100
            },{
                header: 'Heritage',
                dataIndex: 'heritage',
                sortable: false,
                align: 'center',
                width: 100
            }],
            dataUrl:'<%=request.getContextPath()%>/servlet/com.sharedvalue.servlet.inet.http.moveTo?MNEMO=FPOSTE_REPERE&SP=<%=userSession.getCurrentSpace()%>&ROLE=<%=userSession.getCurrentRole()%>&ACTION=GETJSON&ID=<%=sId%>&idPrFather=<%=idPrFather%>&idPrType=<%=idPrType%>',
            root: {
                    nodeType: 'async',
                    text: 'root',
                    draggable: false,
                    id: '0',
                    expand: true
                }
        });
 
        tree.render('gridCompetence');
 
    });

Maintenant voici la structure de mon JSON:

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
{"text":"root","children":[
    {"text":"Compétences comportementales","children":[
        {"heritage":"Informatique","text":"Vivre et promouvoir les valeurs NTB","leaf":"true","valeurRequise":"Maitrise","id":40},
        {"heritage":"bla","text":"S’engager et agir","leaf":"true","valeurRequise":"Maitrise","id":41},
        {"heritage":"bla","text":"Avoir l’esprit d’équipe et de coopération","leaf":"true","valeurRequise":"Maitrise","id":42},
        {"heritage":"Informatique","text":"Être orienté résultat","leaf":"true","valeurRequise":"Maitrise","id":43},
        {"heritage":"bla","text":"Favoriser le changement et l’initiative","leaf":"true","valeurRequise":"Maitrise","id":44},
        {"heritage":"Informatique","text":"Communiquer","leaf":"true","valeurRequise":"Maitrise","id":45},
        {"heritage":"bla","text":"Etre acteur de son propre développement","leaf":"true","valeurRequise":"Maitrise","id":46},
        {"heritage":"bla","text":"Analyser","leaf":"true","valeurRequise":"Maitrise","id":47},
        {"heritage":"bla","text":"Prévenir et gérer un conflit","leaf":"true","valeurRequise":"Maitrise","id":48},
        {"heritage":"bla","text":"Contrôler","leaf":"true","valeurRequise":"Maitrise","id":49}
    ],"id":513},
    {"text":"Compétences techniques","children":[
        {"heritage":"bla","text":"Systems Integration","leaf":"true","valeurRequise":"Maitrise","id":15},
        {"heritage":"bla","text":"Testing","leaf":"true","valeurRequise":"Maitrise","id":16},
        {"heritage":"bla","text":"Solution Deployment","leaf":"true","valeurRequise":"Maitrise","id":17},
        {"heritage":"bla","text":"Technical Publications Development","leaf":"true","valeurRequise":"Maitrise","id":18},
        {"heritage":"bla","text":"User Support","leaf":"true","valeurRequise":"Maitrise","id":19},
        {"heritage":"bla","text":"Change Support","leaf":"true","valeurRequise":"Maitrise","id":20},
        {"heritage":"bla","text":"Service Delivery","leaf":"true","valeurRequise":"Maitrise","id":30},
        {"heritage":"bla","text":"Problem Management","leaf":"true","valeurRequise":"Maitrise","id":21},
        {"heritage":"Informatique","text":"Channel Management","leaf":"true","valeurRequise":"Maitrise","id":27}
    ],"id":515}],
"id":"0"}

L'exécution de ce code me renvoi cette erreur: node.attributes is undefined

Ai-je le "droit" de ne mettre les attributs héritage et valeurRequise uniquement sur les éléments fils ?
Merci d'avance pour votre aide.

[goldledoigt]

Leaf en anglais veut dire "feuille".
Le fait de mettre leaf:true à un noeud de ton arbre indique que ce noeud n'a pas de descendants.
Tu peux donc deja commencer par enlever les leaf:true que tu as mis sur chaque noeud.
Sur tous les noeuds ou tu as la propriété:
children:[{...}, {...}, ...]
tu dois avoir
leaf:false

[JulienFio]

Oui effectivement, j'ai lu ça un peu plus loin dans le forum, maintenant j'ai bel et bien une erreur qui ressort. Voici mon code modifié

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
 
Ext.onReady(function() {
        Ext.QuickTips.init();        
 
        var tree = new Ext.ux.tree.TreeGrid({
            width: 800,
            height: 500,
            animate: true,
            enableDD: true,
            autoScroll: true,
            columns:[{
                header: 'Compétence',
                dataIndex: 'text',
                sortable: false,
                width: 600
            },{
                header: 'Valeur requise',
                dataIndex: 'valeurRequise',
                sortable: false,
                align: 'center',
                width: 100
            },{
                header: 'Heritage',
                dataIndex: 'heritage',
                sortable: false,
                align: 'center',
                width: 100
            }],
            dataUrl:'<%=request.getContextPath()%>/servlet/com.sharedvalue.servlet.inet.http.moveTo?MNEMO=FPOSTE_REPERE&SP=<%=userSession.getCurrentSpace()%>&ROLE=<%=userSession.getCurrentRole()%>&ACTION=GETJSON&ID=<%=sId%>&idPrFather=<%=idPrFather%>&idPrType=<%=idPrType%>',
            root: {
                    nodeType: 'async',
                    text: 'root',
                    draggable: false,
                    id: '0',
                    expand: true
                }
        });
 
        tree.render('gridCompetence');
 
    });

Maintenant voici la structure de mon JSON:

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
{"heritage":" ","text":"root","leaf":"false","valeurRequise":" ","children":[
    {"heritage":" ","text":"Compétences comportementales","leaf":"false","valeurRequise":" ","children":[
        {"heritage":"Informatique","text":"Vivre et promouvoir les valeurs NTB","leaf":"true","valeurRequise":"Maitrise","id":40},
        {"heritage":" ","text":"S’engager et agir","leaf":"true","valeurRequise":"Maitrise","id":41},
        {"heritage":" ","text":"Avoir l’esprit d’équipe et de coopération","leaf":"true","valeurRequise":"Maitrise","id":42},
        {"heritage":"Informatique","text":"Être orienté résultat","leaf":"true","valeurRequise":"Maitrise","id":43},
        {"heritage":" ","text":"Favoriser le changement et l’initiative","leaf":"true","valeurRequise":"Maitrise","id":44},
        {"heritage":"Informatique","text":"Communiquer","leaf":"true","valeurRequise":"Maitrise","id":45},
        {"heritage":" ","text":"Etre acteur de son propre développement","leaf":"true","valeurRequise":"Maitrise","id":46},
        {"heritage":" ","text":"Analyser","leaf":"true","valeurRequise":"Maitrise","id":47},
        {"heritage":" ","text":"Prévenir et gérer un conflit","leaf":"true","valeurRequise":"Maitrise","id":48},
        {"heritage":" ","text":"Contrôler","leaf":"true","valeurRequise":"Maitrise","id":49}
    ],"id":513},
    {"heritage":" ","text":"Compétences techniques","leaf":"false","valeurRequise":" ","children":[
        {"heritage":" ","text":"Systems Integration","leaf":"true","valeurRequise":"Maitrise","id":15},
        {"heritage":" ","text":"Testing","leaf":"true","valeurRequise":"Maitrise","id":16},
        {"heritage":" ","text":"Solution Deployment","leaf":"true","valeurRequise":"Maitrise","id":17},
        {"heritage":" ","text":"Technical Publications Development","leaf":"true","valeurRequise":"Maitrise","id":18},
        {"heritage":" ","text":"User Support","leaf":"true","valeurRequise":"Maitrise","id":19},
        {"heritage":" ","text":"Change Support","leaf":"true","valeurRequise":"Maitrise","id":20},
        {"heritage":" ","text":"Service Delivery","leaf":"true","valeurRequise":"Maitrise","id":30},
        {"heritage":" ","text":"Problem Management","leaf":"true","valeurRequise":"Maitrise","id":21},
        {"heritage":"Informatique","text":"Channel Management","leaf":"true","valeurRequise":"Maitrise","id":27}
    ],"id":515}],
"id":"0"}

L'exécution de ce code me renvoi cette erreur: node.attributes is undefined

Dans mon TreeGrid je précise :

Code :

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

1
2
3
4
5
6
7
root: {
                    nodeType: 'async',
                    text: 'root',
                    draggable: false,
                    id: '0',
                    expand: true
                }

root et 0 correspondent bien à ma racine pourtant, ai-je mal compris quelque chose ?

Autre question: Ai-je le droit de ne mettre les attributs heritage et valeurRequise qu'aux éléments de plus bas niveau ? (car en fait ils ne seront renseigné que là)

[goldledoigt]

Je suppose que ton noeud ROOT doit aussi posséder toutes les propriétés définissants les colonnes.

essaye ca:

Code :

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

1
2
3
4
5
6
7
8
9
root: {
    nodeType: 'async',
    text: 'root',
    draggable: false,
    id: '0',
    expand: true,
    valeurRequise:'',
    heritage:''
}

[JulienFio]

Alors non ce n'est pas ça, mais ta remarque m'a cependant permis d'avancer un peu. J'ai modifié le paramètre root comme tu me l'as conseillé:

Code :

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

1
2
3
4
5
6
7
8
9
root: {
                nodeType: 'async',
                text: 'root',
                valeurRequise:' ',
                heritage:' ',
                draggable: false,
                id: '0',
                expand: true
            }

Cela ne fonctionne toujours pas (même erreur) mais j'ai remarqué que je ne passais pas dans la construction du JSON. En fait c'est à la construction du TreePanel que cela plante, avant la récupération du JSON (Dans ma JSP l'arbre n'est même pas construit). Du coup je ne pense pas que ça soit un problème de synthaxe sur le JSON mais plutôt d'un problème de paramètre sur root qui ferait planter le constructeur.
Si j'enlève ce paramètre root de mon TreeGrid l'arbre apparait correctement dans ma JSP, le TreeGrid récupère bien monJSON mais aucune données n'y figure.
J'ai bien regardé les exemples d' Ext.tree et je ne vois pas où j'ai faux.

EDIT:
Voici l'erreur exacte
nodes.attributes is undefined

Code :

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

1
2
3
4
5
6
7
8
9
 setRootNode : function(node){
//Erreur
      node.attributes.uiProvider = Ext.ux.tree.TreeGridRootNodeUI;            
        node = Ext.ux.tree.TreeGrid.superclass.setRootNode.call(this, node);
        if(this.innerCt) {
            this.colgroupTpl.insertFirst(this.innerCt, {columns: this.columns});
        }
        return node;
    },

Cela voudrait-il dire que le constructeur ne connais pas "node" pour construire l'arborescence ?

[JulienFio]

Bon,

problème résolu. JSONArray bordel, JSONArray !!! Depuis le début je renvoyais un JSONObject à mon TreeGrid....

Merci pour ton aide en tout cas.