Discussion :

[JulienFio]

Bonjour,

J'ai un treeGrid avec un store obtenu depuis ma servlet. Mon problème c'est que je n'arrive pas à récupérer le store de mon treeGrid pour le renvoyer à ma servlet de façon à ce qu'elle puisse faire des traitements en base selon les changement d'ordre dans mon arbre.

Voici mon code javascript:

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
Ext.onReady(function() {
    Ext.QuickTips.init();
 
    var storeLoader = new Ext.tree.TreeLoader({
            url: '<%=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%>',
            uiProviders:{
                'col': Ext.ux.tree.ColumnNodeUI
            }
            });
 
    var root = new Ext.tree.AsyncTreeNode({
        text: 'source', //texte du noeud
        draggable: false, // Désactiver le Drag and drop sur ce noeud
        id: '0'
    });
 
    var tree = new Ext.ux.tree.TreeGrid({
        id: 'treeCompetence',
        height: 300,
        renderTo: 'gridCompetence',
        enableDD: true,
        rottVisible: false,
        animate:true, 
        columnResize : true,
        enableSort : false,
        autoScroll: true,
        containerScroll: true,
        forceFit: true,
        columns:[{
            header: 'Compétence',
            dataIndex: 'text',
            sortable: false,
            fixed: true,
            width: 500
        },{
            header: 'Valeur requise',
            dataIndex: 'valeurRequise',
            sortable: false,
            align: 'center',
            fixed: true,
            width: 100
        },{
            header: 'Heritage',
            dataIndex: 'heritage',
            sortable: false,
            align: 'center',
            fixed: true,
            width: 100
        }
        ],
        tbar:[{
                text: '<sv:label idModule="600" idLabel="53" escapeJavascript="true" defaultValue='Delete'/>',
                tooltip: '<sv:label idModule="600" idLabel="37" escapeJavascript="true" defaultValue='Click to delete selected node'/>',
                tooltipType: 'title',
                id: 'delComp',
                align: 'right',
                disabled: true,
                icon: '<%=request.getContextPath()%>/images/global/skin/icons/cross.png',
                handler : function(){
                    var treeCompetence = Ext.getCmp('treeCompetence');
                    var selectedNode = treeCompetence.selModel.selNode;
                    detachComp(selectedNode.attributes.id);
                }
            },{
                text: 'Sauvegarder l\'ordre',
                tooltip: '<sv:label idModule="600" idLabel="37" escapeJavascript="true" defaultValue='Click to delete selected node'/>',
                tooltipType: 'title',
                id: 'saveOrder',
                align: 'right',
                disabled: true,
                icon: '<%=request.getContextPath()%>/images/global/skin/icons/disk.png',
                handler : function(){
 
                }
            }],
        listeners: {
            dblclick : function(node, e ){
                if(node.attributes.cls != "task-folder"){
                   document.location.href = '<%=request.getContextPath()%>/servlet/com.sharedvalue.servlet.inet.http.moveTo?SP=<%=userSession.getCurrentSpace()%>&ROLE=<%=userSession.getCurrentRole()%>&MNEMO=FCOMPETENCE&IDGRPED='+node.parentNode.attributes.id+'&ID='+node.attributes.id+'&IDPR='+node.attributes.IDPRNEW+'&IDPRNEW=<%=aPoste.getId()%>&ACTION=U';
                }
            },
            click : function(node, e ){               
                if(node.attributes.cls != "task-folder" && node.attributes.cls != "rouge"){
                    Ext.getCmp('delComp').enable();
                }else{
                    Ext.getCmp('delComp').disable();
                }                
            },
            nodedrop : function(e){
                Ext.getCmp('saveOrder').enable();                
            },
            beforenodedrop : function(e){
                if(e.dropNode.parentNode.id != e.target.parentNode.id){
                    e.cancel = true;
                    if(e.target.parentNode.text == 'source'){
                        alert('Vous ne pouvez pas déplacer cette compétence dans le groupe: '+e.target.text);
                    }else{
                        alert('Vous ne pouvez pas déplacer cette compétence dans le groupe: '+e.target.parentNode.text);
                    }
                }
            }
        },
        loader: storeLoader,
        root: root
    });
 
 
});

j'ai essayé getStore mais cela me renvoie une erreur: getStore() is not a function.
Pareil pour getTreeStore()

edit: Je précise qu'il me faut récupérer le store avec les changements d'ordre des éléments (s'il y a eu changement d'ordre)


Merci à vous.

[goldledoigt]

Tout d'abord il faut savoir que ton TreeGrid n'est pas un grid mais un tree. Les methodes qui lui sont associées sont donc celles d'Ext.tree.TreePanel et non pas celles d'Ext.grid.GridPanel.

Code :

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

Ext.ux.tree.TreeGrid = Ext.extend(Ext.tree.TreePanel, {...});

Dans l'API si tu regardes les méthodes du TreePanel il n'y a pas de getStore() mais un getLoader() car le TreePanel n'utilise pas de store pour gérer ses données, il utilise un TreeLoader.

Ceci étant dit je ne suis pas sur d'avoir bien compris ce que tu voulais faire. Je suppose que tu veux envoyer à ta servlet les informations concernant chaque déplacement d'un noeud dans ton arbre.
Pour ca tu as tout ce qu'il te faut dans l'event object que tu reçois en paramètre du listener nodedrop ( e.dropNode & e.target ).

[JulienFio]

Merci Goldledoigt,

c'est vrai que je ne cherchais pas où il fallait, c'est bien les méthodes héritées de treePanel qu'il me faut regarder.

Ce que je souhaite faire ? Eh bien je souhaite sauvegarder en base l'ordre de mes compétences, ordre qui peut changer grâce au Drag and Drop. Dans un premier temps j'avais donc penser renvoyer à ma servlet le store complet pour quelle fasse ses traitements, ensuite après mûre réflexion j'ai opté pour une chaine de caractère composer de tous mes ID séparés par un séparateur (Un JSON étant un peu lourd à faire passer dans une request).

Donc il me faut récupérer le store lorsque je click sur le bouton "Sauvegarder l'ordre" de ma toolBar, ensuite parcourir ce store 'dans l'ordre' et récupérer l'ID de chaque compétences. Je ne souhaite pas faire de requête en base à chaque 'nodeDrop', mais plutot une sauvegarde finale à la demande de l'utilisateur (quand il fera un click sur le bouton adéquat).

[JulienFio]

Finalement j'ai trouver comment parcourir mon store, et je n'ai pas eu besoin d'utiliser getLoader.

Pour ceux que ça intéresse voici comment je procède:

Code :

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

1
2
3
4
5
6
7
 
root.eachChild(function(record) {
                    alert(record.text); //boucle sur chaque dossier compétences
                    record.eachChild(function(record) {
                        alert(record.text); //boucle sur les compétences de chaque dossier
                    });
                });

root étant la racine de mon arbre, et je n'ai que deux niveau dans mon arbre.

Encore merci pour ton aide précieuse