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
| Ext.require([
| 'Ext.tree.*',
| 'Ext.data.*',
| 'Ext.layout.container.HBox',
| 'Ext.window.MessageBox'
| ]);
|
| Ext.define('Item', {
| extend: 'Ext.data.Model',
| fields: ['text', 'canDropOnFirst', 'canDropOnSecond']
| })
|
| Ext.onReady(function() {
|
| var store1 = new Ext.data.TreeStore({
| model: 'Item',
| root: {
| text: 'Root 1',
| expanded: true,
| children: [{
| text: 'Child 1',
| canDropOnFirst: true,
| canDropOnSecond: true,
| leaf: true
| }, {
| text: 'Child 2',
| canDropOnFirst: true,
| canDropOnSecond: false,
| leaf: true
| }, {
| text: 'Child 3',
| canDropOnFirst: false,
| canDropOnSecond: true,
| leaf: true
| }, {
| text: 'Child 4',
| canDropOnFirst: false,
| canDropOnSecond: false,
| leaf: true
| }]
| }
| });
|
| var store2 = new Ext.data.TreeStore({
| model: 'Item',
| root: {
| text: 'Root 2',
| expanded: true,
| children: [{
| text: 'Folder 1',
| children: [],
| expanded: true
| }, {
| text: 'Folder 2',
| children: [],
| expanded: true
| }]
| }
| });
|
| new Ext.panel.Panel({
| renderTo: 'tree-div',
| width: 300,
| height: 200,
| layout: {
| type: 'hbox',
| align: 'stretch'
| },
| defaultType: 'treepanel',
| defaults: {
| rootVisible: false,
| flex: 1
| },
| items: [{
| title: 'Source',
| store: store1,
| viewConfig: {
| plugins: {
| ptype: 'treeviewdragdrop',
| enableDrag: true,
| enableDrop: false
| }
| }
| }, {
| title: 'Destination',
| store: store2,
| viewConfig: {
| plugins: {
| ptype: 'treeviewdragdrop',
| enableDrag: false,
| enableDrop: true,
| appendOnly: true
| },
| listeners: {
| nodedragover: function(targetNode, position, dragData){
| var rec = dragData.records[0],
| isFirst = targetNode.isFirst(),
| canDropFirst = rec.get('canDropOnFirst'),
| canDropSecond = rec.get('canDropOnSecond');
|
| return isFirst ? canDropFirst : canDropSecond;
| }
| }
| }
| }]
| });
| });
|
|
