You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
175 lines
7.7 KiB
175 lines
7.7 KiB
<!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>
|
|
|