technetium
30 Jul 2007, 1:18 AM
The problem came up when I was trying to create a simple List widget using the Tree as a base. Tree already provides the icon, renaming as well as DnD with minimal code as we already have proper trees elsewhere in the interface.
However the issue is if you make the TreePanel with "rootVisible: false" you cannot drop *any* content into it.
It appears that you can only drop a tree node onto another tree node, and not into the TreePanel container whitespace. This is correct behavior if the root is visible, but when root is not visible the whole panel *is* the root's content so you should be able to drop anywhere within it.
Is this something that will be fixed, or is it functioning as designed and we should use Grid instead?
Example code:
<html>
<head>
<title>TreeTest</title>
(now include paths to ext-all-debug.js and the basic CSS)
<style type="text/css">
.basicTree {
border: 1px solid black;
float: left;
width: 200px;
height: 150px;
padding: 1px;
background-color: white;
margin-right: 50px;
overflow: auto;
}
</style>
<script type="text/javascript">
function init(){
var treeConfig = {
animate: false,
enableDD: true,
rootVisible: true,
ddAppendOnly: true,
lines: false,
ddGroup: 'groupEdit'
};
var availRoot = new Ext.tree.TreeNode({text: '--Available--', allowDrag: false, allowDrop: true, draggable: false, expanded: true});
var assignRoot = new Ext.tree.TreeNode({text: '--Assign--', allowDrag: false, allowDrop: true, draggable: false, expanded: true});
availRoot.appendChild(new Ext.tree.TreeNode({text: 'node1', allowDrop: false}));
availRoot.appendChild(new Ext.tree.TreeNode({text: 'node2', allowDrop: false}));
availRoot.appendChild(new Ext.tree.TreeNode({text: 'node3', allowDrop: false}));
var tree1 = new Ext.tree.TreePanel('tree1', treeConfig);
var tree2 = new Ext.tree.TreePanel('tree2', treeConfig);
tree1.setRootNode(availRoot);
tree2.setRootNode(assignRoot);
tree1.render();
tree2.render();
}
Ext.EventManager.onDocumentReady(init, window, true);
</script>
</head>
<body >
<div id="tree1" class="basicTree"></div>
<div id="tree2" class="basicTree"></div>
</body>
</html>
rad_nq,
Here is one way to setup your tree and it's container to allow drop when the tree root is empty and hidden:
function setupTreePanel(container, content, text)
{
if ( text )
{
content =
[{
text: text,
leaf: false,
iconCls: "a-folder",
expanded: true,
children: content
}]
}
var tree = new T.TreePanel(container,
{
animate: false,
loader: new T.TreeLoader(),
enableDD: true,
containerScroll: true,
rootVisible: false,
ddGroup: ddGroup
});
tree.setRootNode(new T.AsyncTreeNode(
{
text: text,
leaf: false,
draggable: false,
expanded: true,
iconCls: "a-folder",
children: content
}));
tree.render();
tree.on("contextmenu", this.menuEx);
setupEmptyTreeDrop(container, tree, tree.root);
return tree;
}
function setupEmptyTreeDrop(container, tree, root)
{
var dropTarget = new D.DropTarget(Ext.get(container),
{
ddGroup: tree.ddGroup,
dropAllowed: "x-tree-drop-ok-append"
});
dropTarget.notifyDrop = function(dd, e, data)
{
if(data.node)
{
root.appendChild(data.node);
}
return true;
}
dropTarget.isTarget = (! root.firstChild);
if ( Ext.isIE )
{
tree.getEl().select("ul.x-tree-root-ct").addClass("a-zero-height");
}
root.on("remove", function(tree, root)
{
dropTarget.isTarget = (! root.firstChild);
});
root.on("append", function()
{
dropTarget.isTarget = false;
});
}
Hi,
I'm new here and am not very experienced with JS or even EXTJS (although it seems to support one very well in coding)
I just have the same problem: DnD without a treenode visible.
I tried the first code by rad_nq and it works - but with nodes as mentioned by him.
Now there is the new code by ivaylo - that all sounds fine but can someone help me implementing that code to the one above? what is to be changed by me so that I get a DnD without nodes (only elements that can be dropped in the new container).
thanks in advance!
Technetium
However the issue is if you make the TreePanel with "rootVisible: false" you cannot drop *any* content into it.
It appears that you can only drop a tree node onto another tree node, and not into the TreePanel container whitespace. This is correct behavior if the root is visible, but when root is not visible the whole panel *is* the root's content so you should be able to drop anywhere within it.
Is this something that will be fixed, or is it functioning as designed and we should use Grid instead?
Example code:
<html>
<head>
<title>TreeTest</title>
(now include paths to ext-all-debug.js and the basic CSS)
<style type="text/css">
.basicTree {
border: 1px solid black;
float: left;
width: 200px;
height: 150px;
padding: 1px;
background-color: white;
margin-right: 50px;
overflow: auto;
}
</style>
<script type="text/javascript">
function init(){
var treeConfig = {
animate: false,
enableDD: true,
rootVisible: true,
ddAppendOnly: true,
lines: false,
ddGroup: 'groupEdit'
};
var availRoot = new Ext.tree.TreeNode({text: '--Available--', allowDrag: false, allowDrop: true, draggable: false, expanded: true});
var assignRoot = new Ext.tree.TreeNode({text: '--Assign--', allowDrag: false, allowDrop: true, draggable: false, expanded: true});
availRoot.appendChild(new Ext.tree.TreeNode({text: 'node1', allowDrop: false}));
availRoot.appendChild(new Ext.tree.TreeNode({text: 'node2', allowDrop: false}));
availRoot.appendChild(new Ext.tree.TreeNode({text: 'node3', allowDrop: false}));
var tree1 = new Ext.tree.TreePanel('tree1', treeConfig);
var tree2 = new Ext.tree.TreePanel('tree2', treeConfig);
tree1.setRootNode(availRoot);
tree2.setRootNode(assignRoot);
tree1.render();
tree2.render();
}
Ext.EventManager.onDocumentReady(init, window, true);
</script>
</head>
<body >
<div id="tree1" class="basicTree"></div>
<div id="tree2" class="basicTree"></div>
</body>
</html>
rad_nq,
Here is one way to setup your tree and it's container to allow drop when the tree root is empty and hidden:
function setupTreePanel(container, content, text)
{
if ( text )
{
content =
[{
text: text,
leaf: false,
iconCls: "a-folder",
expanded: true,
children: content
}]
}
var tree = new T.TreePanel(container,
{
animate: false,
loader: new T.TreeLoader(),
enableDD: true,
containerScroll: true,
rootVisible: false,
ddGroup: ddGroup
});
tree.setRootNode(new T.AsyncTreeNode(
{
text: text,
leaf: false,
draggable: false,
expanded: true,
iconCls: "a-folder",
children: content
}));
tree.render();
tree.on("contextmenu", this.menuEx);
setupEmptyTreeDrop(container, tree, tree.root);
return tree;
}
function setupEmptyTreeDrop(container, tree, root)
{
var dropTarget = new D.DropTarget(Ext.get(container),
{
ddGroup: tree.ddGroup,
dropAllowed: "x-tree-drop-ok-append"
});
dropTarget.notifyDrop = function(dd, e, data)
{
if(data.node)
{
root.appendChild(data.node);
}
return true;
}
dropTarget.isTarget = (! root.firstChild);
if ( Ext.isIE )
{
tree.getEl().select("ul.x-tree-root-ct").addClass("a-zero-height");
}
root.on("remove", function(tree, root)
{
dropTarget.isTarget = (! root.firstChild);
});
root.on("append", function()
{
dropTarget.isTarget = false;
});
}
Hi,
I'm new here and am not very experienced with JS or even EXTJS (although it seems to support one very well in coding)
I just have the same problem: DnD without a treenode visible.
I tried the first code by rad_nq and it works - but with nodes as mentioned by him.
Now there is the new code by ivaylo - that all sounds fine but can someone help me implementing that code to the one above? what is to be changed by me so that I get a DnD without nodes (only elements that can be dropped in the new container).
thanks in advance!
Technetium