<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Dijit Tree Test</title>
<script type="text/javascript" src="../boilerplate.js"></script>
<script type="text/javascript">
require([
"dojo/parser",
"dojo/data/ItemFileWriteStore",
"dijit/Tree",
"dijit/tree/ForestStoreModel",
"dijit/ColorPalette",
"dijit/Menu",
"dijit/MenuItem",
"dijit/PopupMenuItem",
"dojo/domReady!"
], function(parser){
parser.parse();
});
// Global variable used by mytree (and in turn referenced by Tree_mouse.html robot test)
mouseDowns = 0;
</script>
</head>
<body class="claro" role="main">
<script type="dojo/require">
registry: "dijit/registry"
</script>
<h1 class="testTitle">Dijit Tree Test</h1>
<div data-dojo-id="continentStore" data-dojo-type="dojo/data/ItemFileWriteStore" data-dojo-props='url:"../_data/countries.json"'></div>
<div data-dojo-id="continentModel" data-dojo-type="dijit/tree/ForestStoreModel" data-dojo-props='store:continentStore, query:{type:"continent"},
rootId:"continentRoot", rootLabel:"Continents", childrenAttrs:["children"]'></div>
<div data-dojo-id="wideModel" data-dojo-type="dijit/tree/ForestStoreModel" data-dojo-props='store:continentStore, query:{type:"continent"},
rootId:"continentRoot", rootLabel:"Long label that causes scrolling", childrenAttrs:["children"]'></div>
<h2 id="mytreeLabel">Tree with hardcoded root node (not corresponding to any item in the store)</h2>
<p>
Clicking a folder node will open/close it (openOnclick==true),
and clicking a leaf node will log a message to the console.
</p>
<label for="mytree_before">before:</label><input id="mytree_before"/>
<div id="mytree" data-dojo-type="dijit/Tree" aria-labelledby="mytreeLabel"
data-dojo-props='model:continentModel, openOnClick:true, onLoad:function(){ console.log("loaded mytree (first tree)"); }'>
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="item">
console.log("Execute of node " + continentStore.getLabel(item)
+", population=" + continentStore.getValue(item, "population"));
</script>
<script type="dojo/method" data-dojo-event="onOpen" data-dojo-args="item">
console.log("Open of node " + (continentStore.getLabel(item) || "root"));
</script>
<script type="dojo/method" data-dojo-event="onClose" data-dojo-args="item">
console.log("Close of node " + (continentStore.getLabel(item) || "root"));
</script>
<script type="dojo/method" data-dojo-event="onMouseDown" data-dojo-args="evt">
mouseDowns++;
</script>
</div>
<button id="mytreeDestroyButton" onclick="dijit.byId('mytree').destroyRecursive();">destroy</button>
<h2 id="tree2Label">A rootless tree (no "continents" node) with context menus, and custom icons</h2>
<label for="tree2_before">before:</label><input id="tree2_before"/>
<div id="tree2" data-dojo-type="dijit/Tree" aria-labelledby="tree2Label" data-dojo-props='model:continentModel, showRoot:false, openOnClick:true,onLoad:function(){ console.log("loaded tree2 (second tree)"); }'>
<script type="dojo/method" data-dojo-event="getIconClass" data-dojo-args="item, opened">
return (item == this.model.root || continentStore.getValue(item, "type") == "continent") ?
(opened ? "customFolderOpenedIcon" : "customFolderClosedIcon") :
"noteIcon";
</script>
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="item">
console.log("Execute of node " + this.model.getLabel(item)
+", population=" + continentStore.getValue(item, "population"));
</script>
</div>
<ul id="tree_menu" data-dojo-type="dijit/Menu"
data-dojo-props='style:"display: none;", targetNodeIds: ["tree2"], selector: ".dijitTreeNode"'>
<li data-dojo-type="dijit/MenuItem">
<script type="dojo/on" data-dojo-event="click">
// get a hold of the dijit.TreeNode that was the source of this open event
var tn = registry.byNode(this.getParent().currentTarget);
// now print the data store item that backs the tree node
console.debug("menu click for item: ", tn.item.name);
</script>
Click Me
</li>
</ul>
<button id="tree2ExpandAll" onclick="dijit.byId('tree2').expandAll();">expand all</button>
<button onclick="dijit.byId('tree2').collapseAll();">collapse all</button>
<h2 id="mytree3Label">Double click, expand on load, direct style setting, tooltip test tree</h2>
<p>
Double-Clicking a folder node will open/close it (openOnDblClick==true),
and clicking or Double Clicking a leaf node will log a message to the console.
</p>
<label for="mytree3_before">before:</label> <input id="mytree3_before"/>
<div id="mytree3" aria-labelledby="mytree3Label" data-dojo-type="dijit/Tree"
data-dojo-props='store:continentStore, query:{type:"continent"},
label:"Continents", openOnClick:false, openOnDblClick:true,
autoExpand:true, onLoad:function(){ console.log("loaded mytree3 (third tree)"); }'>
<script type="dojo/method" data-dojo-event="getLabelStyle" data-dojo-args="item,opened">
if(item && continentStore.getValue(item,"type") == "continent"){
return {color: "red"};
}else{
return {color: "green"};
}
</script>
<script type="dojo/method" data-dojo-event="getIconStyle" data-dojo-args="item,opened">
if(item && continentStore.getValue(item,"type") == "continent"){
return {
backgroundImage: "url('../images/flatScreen.gif')",
height: "32px",
width: "32px"
};
}else{
return null;
}
</script>
<script type="dojo/method" data-dojo-event="getIconClass" data-dojo-args="item, opened">
if(!item || continentStore.getValue(item, "type") != "continent")
return (!item || this.model.mayHaveChildren(item)) ? (opened ? "dijitFolderOpened" : "dijitFolderClosed") : "dijitLeaf"
else
return "";
</script>
<script type="dojo/method" data-dojo-event="getTooltip" data-dojo-args="item,opened">
return item && ("Tooltip for " + this.model.getLabel(item));
</script>
<script type="dojo/method" data-dojo-event="onDblClick" data-dojo-args="item">
console.log("Execute of node " + this.model.getLabel(item)
+", population=" + continentStore.getValue(item, "population"));
</script>
</div>
<h2 id="thinTreeLabel">Tree w/horizontal scroll</h2>
<p>
For checking that selection and highlighting effect goes all the way to the right.
</p>
<p>
Expand North America and check highlighting for United States, plus shorter labels.
Then collapse North America and make sure horizontal scrollbar disappears.
</p>
<p>
Also check whether the Tree's initial display is correct.
Since the Tree persists, try refreshing the page when the tree is in an open state, and when it's in a closed
state.
</p>
<div id="thinTree" style="width: 170px; border: solid 1px #759dc0"
data-dojo-type="dijit/Tree" aria-labelledby="thinTreeLabel" data-dojo-props="model:wideModel">
<script type="dojo/aspect" data-dojo-advice="after" data-dojo-method="_adjustWidths">
console.log(this.id + ": adjusted widths of nodes");
</script>
</div>
<button onclick="dijit.byId('thinTree').expandAll();">expand all</button>
<button onclick="dijit.byId('thinTree').collapseAll();">collapse all</button>
<button onclick="dijit.byId('thinTree').set('paths', [['continentRoot','AF'],['continentRoot','NA','US']]);">
set paths to Africa, US
</button>
<button onclick="continentStore.fetchItemByIdentity({identity: 'US', onItem: function(item){ continentStore.setValue(item, 'name', 'A very very very long name for USA'); }});">
set long name for USA
</button>
<button onclick="continentStore.fetchItemByIdentity({identity: 'US', onItem: function(item){ continentStore.setValue(item, 'name', 'USA'); }});">
set short name for USA
</button>
</body>
</html>