<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.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],
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);
});
function expandAllStart() {
dojo.profile.start("expandAll + timeouts");
}
function expandAllEnd() {
dojo.profile.end("expandAll + timeouts");
alert("expandAll finished");
}
</script>
</head>
<body>
<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>
<h4>Test drag'n'drop & lazy creation & batch expand stuff</h4>
<input type="button" value="Expand first node to level 2" onClick="controller.expandToLevel(tree.children[0],2)"/>
<input type="button" value="Expand tree to level 2" onClick="controller.expandToLevel(tree,2)"/>
<input type="button" value="Expand all with callback at finish" onClick="expandAllStart();controller.expandAll(tree,expandAllEnd)"/>
<br/>
<input type="button" value="Collapse all nodes" onClick="controller.collapseAll(tree)"/>
<br/>
<input type="button" value="Clone first node and append to tree" onClick="tree.addChild(tree.children[0].clone(true))">
<br/>
<input type="button" value="dump profile" onClick="dojo.profile.dump(true)">
</body>
</html>