dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
176 lines (158 loc) • 7.84 kB
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>