Chargement JSON dans un TreeGrid

Version imprimable

Bonjour,

Je débute en Extjs et je galère un peu à faire fonctionner un TreeGrid avec un JSON dynamique. voici mon code:

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
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:

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.

30/09/2010, 16h38
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

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:

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:

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:

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à)

30/09/2010, 17h15
goldledoigt
Je suppose que ton noeud ROOT doit aussi posséder toutes les propriétés définissants les colonnes.

essaye ca:
Code:

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

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:

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:

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 ?

01/10/2010, 09h29
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.