Drag and Drop d'un élément dans un TreePanel

[major68]

Bonjour,

J'aimerais faire un gestionnaire de news avec extjs et un Tree.

J'ai donc déjà un tree à droite de la page :

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
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
 
var newIndex =0;
    var tb = new Ext.Toolbar({
        items:[{
            text: 'Nouveau dossier',
            iconCls: 'album-btn',
            handler: function(){
            	root.expand();
                var node = root.appendChild(new Ext.tree.TreeNode({
                    text:'Dossier ' + (++newIndex),
                    cls:'cls',
                    allowDrag:true
                }));
                tree.getSelectionModel().select(node);
                setTimeout(function(){
                    ge.editNode = node;
                    ge.startEdit(node.ui.textNode);
                }, 10);
            }
        }]
    });
 
 
 
    var tree = new Ext.tree.TreePanel({
    	useArrows: true,
        autoScroll: true,
        animate: true,
        enableDD: true,
        ddGroup: 'organizerDD',
        containerScroll: true,
        border: false,
        width: 260,
        tbar: tb,
        // auto create TreeLoader
        dataUrl: '/ajax/tree',
        root: {
            nodeType: 'async',
            text: 'Mon classeur',
            draggable: false,
            id: '0'
        },
        listeners: {
            'click' : function(node){
            	ge.editNode = node;
                ge.startEdit(node.ui.textNode);
            }	
        }
 
 
    });
 
    var root = tree.getRootNode();
    var ge = new Ext.tree.TreeEditor(tree, {/* fieldconfig here */ }, {
        allowBlank:false,
        blankText:'Un nom est requis',
        selectOnFocus:true,
        listeners : {
        	'complete' : function(editor, value){
        		Ext.Ajax.request({
        			   url: '/categories/?action=submit&type=JSON',
        			   params: { category: 0, titre : value, node : editor.editNode.id }
        		});
        	}
        }
    });
 
    tree.on('startdrag', function(tree, node, event){
        oldPosition = node.parentNode.indexOf(node);
        oldNextSibling = node.nextSibling;
    });
 
 
    tree.on('movenode', function(tree, node, oldParent, newParent, position){
        if (oldParent == newParent){
            var url = "/categories/?action=reorder";
            var params = {'node':node.id, 'delta':(position-oldPosition)};
        } else {
            var url = "/categories/?action=reparent";
            var params = {'node':node.id, 'parent':newParent.id, 'position':position};
        }
        tree.disable();
        Ext.Ajax.request({
            url:url,
            params:params,
            success:function(response, request) {
                if (response.responseText.charAt(0) != 1){
                    request.failure();
                } else {
                    tree.enable();
                }
            },
            failure:function() {
                tree.suspendEvents();
                oldParent.appendChild(node);
                if (oldNextSibling){
                    oldParent.insertBefore(node, oldNextSibling);
                }
                tree.resumeEvents();
                tree.enable();
            }
        });
 
    });

Avec ça je peux gérer l'ordre de mes dossiers, en créer et en modifier.

Maintenant ce que j'aimerais c'est avoir les news sur la partie gauche et que je puisse faire un drag n drop dans mon TreePanel sans utiliser des données JSON..

J'ai donc sélectionné mes éléments avec Ext.query(".dragable")
mais je n'arrive pas à lui attribuer le DD.

Merci de votre aide