<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">
delete dojo["profile"];
dojo.require("dojo.profile");
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.TreeV3");
dojo.require("dojo.widget.TreeNodeV3");
dojo.require("dojo.widget.TreeBasicControllerV3");
dojo.require("dojo.widget.TreeDndControllerV3");
dojo.require("dojo.widget.TreeContextMenuV3");
dojo.require("dojo.widget.TreeDemo");
dojo.hostenv.writeIncludes();
</script>
<script type="text/javascript">
var nodeCount = 0;
var nodeCountMax = 500;
dojo.addOnLoad(function(){
var depth = 0;
function addChildren(title) {
//dojo.debug("addChildren title "+title);
depth++;
var children = [];
for (var i=1; i<=5; i++) {
var t = title+'.'+i;
var node = {title: t};
children.push(node);
nodeCount++
if (nodeCount >= nodeCountMax) break;
}
var i=1;
dojo.lang.forEach(children, function(child) {
var t = title+'.'+i;
i++;
// first node is always folder for tests
if (nodeCount<nodeCountMax && (
depth==1 && child === children[0] || depth<5 && Math.random()>0.3 )
) {
//dojo.debug("add child "+t);
child.children = addChildren(t);
}
});
//dojo.debug("out "+nodeOrTree);
depth--;
return children;
}
controller = dojo.widget.createWidget("TreeBasicControllerV3");
dndcontroller = dojo.widget.createWidget("TreeDndControllerV3", { controller: controller });
dojo.profile.start("createTree");
tree = dojo.widget.createWidget("TreeV3", {
listeners: [controller.widgetId,dndcontroller.widgetId,"contextMenu"],
DndAcceptTypes: "firstTree",
widgetId: "firstTree",
DndMode:"between;onto"
});
dojo.profile.end("createTree");
document.body.appendChild(tree.domNode);
dojo.profile.start("prepareNodes");
var nodes = addChildren('node', tree);
dojo.profile.end("prepareNodes");
dojo.profile.start("addNodes");
tree.setChildren(nodes);
dojo.profile.end("addNodes");
dojo.debug("Nodes total: "+nodeCount);
dojo.addOnLoad(function() { dojo.widget.TreeDemo.bindDemoMenu(controller) });
});
</script>
</head>
<body>
<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>
<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>
</body>
</html>