PDA

View Full Version : Drag and drop in tree panels with invisible root



jojopad
14 Feb 2013, 10:27 PM
I'm trying figure out if there's a way to configure the Ext JS Tree panel drag and drop feature to allow a tree node from a Tree Panel to be transferred to another Tree Panel that is configured with an invisible root. Both tree panels are configured not to show the root node so that the tree panel will appear to have multiple root nodes.

I created a jsFiddle script (http://jsfiddle.net/tZSeB/4/) which contains a working implementation of two Tree Panels. Dragging the folder entry from Tree 1 to Tree 2 works because the root node for Tree 2 is shown, but once I set the rootVisible property of Tree 2 to false, it's not possible to drag and drop the folder nodes from Tree 1 to Tree 2. Here's the code from the same jsFiddle script:



Ext.require([
'Ext.tree.*',
'Ext.data.*']);


Ext.onReady(function () {
Ext.define('Folder', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'parentId',
type: 'int'
}, {
name: 'name',
type: 'string'
}]
});


var store1 = Ext.create('Ext.data.TreeStore', {
model: 'Folder',
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'folders'
}
}
});


var tree1 = Ext.create('Ext.tree.Panel', {
itemId: 'tree1',
store: store1,
rootVisible: false,
useArrows: true,
flex: 1,
title: 'Tree 1',
root: [],
columns: [{
xtype: 'treecolumn',
dataIndex: 'name',
flex: 1
}],
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
appendOnly: true,
dragGroup: 'firstTreeDDGroup',
dropGroup: 'secondTreeDDGroup'
}
},
listeners: {
afterrender: function (tree) {
var root = tree.getRootNode();


// load static data
root.appendChild([{
id: 1,
parentId: -1,
name: 'Folder 1',
expanded: true,
folders: [{
id: 11,
parentId: 1,
name: 'Folder 1.1',
folders: []
}, {
id: 12,
parentId: 1,
name: 'Folder 1.2',
folders: []
}]
}, {
id: 2,
parentId: -1,
name: 'Folder 2',
folders: [{
id: 21,
parentId: 2,
name: 'Folder 2.1',
folders: []
}, {
id: 22,
parentId: 2,
name: 'Folder 2.2',
folders: []
}]
}]);
}
}
});


var store2 = Ext.create('Ext.data.TreeStore', {
model: 'Folder',
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'folders'
}
}
});


var tree2 = Ext.create('Ext.tree.Panel', {
itemId: 'tree2',
store: store2,
rootVisible: true,
useArrows: true,
flex: 1,
title: 'Tree 2',
root: [],
columns: [{
xtype: 'treecolumn',
dataIndex: 'name',
flex: 1
}],
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
allowContainerDrop: true,
allowParentInsert: true,
appendOnly: true,
dragGroup: 'secondTreeDDGroup',
dropGroup: 'firstTreeDDGroup'
}
}
});


Ext.create('Ext.window.Window', {
width: 550,
height: 300,


layout: {
type: 'hbox',
align: 'stretch'
},


items: [tree1, tree2]
}).show();
});