<html>
<head>
<script type="text/javascript">
var djConfig = {isDebug: true, debugAtAllCosts: true };
</script>
<script type="text/javascript" src="../../../dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.TreeV3");
dojo.require("dojo.widget.TreeNodeV3");
dojo.require("dojo.widget.TreeRpcControllerV3");
dojo.require("dojo.widget.TreeDndControllerV3");
dojo.require("dojo.widget.TreeEditor");
dojo.require("dojo.widget.TreeContextMenuV3");
dojo.require("dojo.widget.TreeSelectorV3");
dojo.require("dojo.widget.TreeEmphasizeOnSelect");
dojo.require("dojo.widget.TreeDeselectOnDblselect");
dojo.require("dojo.widget.TreeDemo");
dojo.hostenv.writeIncludes();
</script>
<script type="text/javascript">
dojo.addOnLoad(function(){
/* bind demo actions to menu-tree */
dojo.addOnLoad(function() { dojo.widget.TreeDemo.bindDemoMenu(dojo.widget.byId('controller')) });
});
</script>
</head>
<body>
<div dojoType="TreeSelectorV3" widgetId="selector"></div>
<!-- selector extensions -->
<div dojoType="TreeDeselectOnDblselect" selector="selector"></div>
<div dojoType="TreeEmphasizeOnSelect" selector="selector"></div>
<div dojoType="TreeEditor" widgetId="editor"></div>
<div dojoType="TreeRpcControllerV3" widgetId="controller" editor="editor" RpcUrl="rpc.php"></div>
<div dojoType="TreeDndControllerV3" controller="controller" widgetId="dndcontroller"></div>
<div dojoType="TreeContextMenuV3" toggle="explode" contextMenuForWindow="false" widgetId="contextMenu">
<div dojoType="TreeMenuItemV3" treeActions="addChild" iconSrc="../images/createsmall.gif" widgetId="treeContextMenuCreate" caption="Create"></div>
<div dojoType="TreeMenuItemV3" treeActions="remove" iconSrc="../images/removesmall.gif" caption="Remove" widgetId="treeContextMenuDestroy"></div>
<div dojoType="TreeMenuItemV3" treeActions="move" iconSrc="../images/downsmall.png" caption="Up" widgetId="treeContextMenuUp"></div>
<div dojoType="TreeMenuItemV3" treeActions="move" iconSrc="../images/upsmall.png" caption="Down" widgetId="treeContextMenuDown"></div>
<div dojoType="TreeMenuItemV3" treeActions="edit" caption="Edit" widgetId="treeContextMenuEdit"></div>
</div>
<div style="display:none">
<!-- IE has a bug: it reloads all dynamically resolved images, no matter, is it
new Image() or CSS background. If you don't specify images like that,
it will reload them every time a node is expanded -->
<img src="../../../src/widget/templates/images/TreeV3/i.gif">
<img src="../../../src/widget/templates/images/TreeV3/i_half.gif">
<img src="../../../src/widget/templates/images/TreeV3/expand_minus.gif">
<img src="../../../src/widget/templates/images/TreeV3/expand_plus.gif">
<img src="../../../src/widget/templates/images/TreeV3/expand_leaf.gif">
<img src="../../../src/widget/templates/images/TreeV3/i_long.gif">
<img src="../../../src/widget/templates/images/TreeV3/document.gif">
<img src="../../../src/widget/templates/images/TreeV3/open.gif">
<img src="../../../src/widget/templates/images/TreeV3/closed.gif">
</div>
<style>
.treeTable {
width:100%;
}
.treeColumn {
width:25%;
vertical-align: top;
text-align: middle;
border:1px black dashed;
}
</style>
<h3>
Tree with menu, selector, dnd and full operations set.
</h3>
<table class="treeTable" cellspacing="0px">
<TR>
<td style="width:25%"></td>
<TD class="treeColumn">
<div dojoType="TreeV3" DndMode="between;onto" DndAcceptTypes="firstTree" widgetId="firstTree" listeners="controller;dndcontroller;selector;contextMenu">
<div dojoType="TreeNodeV3" title="Node 1"></div>
<div dojoType="TreeNodeV3" title="Node 2">
<div dojoType="TreeNodeV3" title="Node 2.1"></div>
<div dojoType="TreeNodeV3" isFolder="true" title="Node 2.2"></div>
</div>
<div dojoType="TreeNodeV3" title="Node 3" isFolder="true">
</div>
</div>
</TD>
<TD class="treeColumn">
<div dojoType="TreeV3" DndMode="between;onto" DndAcceptTypes="firstTree;secondTree" widgetId="secondTree" listeners="controller;dndcontroller;selector;contextMenu">
<div dojoType="TreeNodeV3" title="Node 1"></div>
<div dojoType="TreeNodeV3" title="Node 2">
<div dojoType="TreeNodeV3" title="Node 2.1"></div>
<div dojoType="TreeNodeV3" isFolder="true" title="Node 2.2"></div>
</div>
<div dojoType="TreeNodeV3" title="Node 3" isFolder="true">
</div>
</div>
</TD>
<td style="width:25%"></td>
</tr>
</table>
</body>
</html>