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
70 lines (58 loc) • 2.84 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Dijit Tree V1 API Test</title>
<style type="text/css">
@import "../../themes/claro/document.css";
@import "../css/dijitTests.css";
</style>
<!-- required: the default dijit theme: -->
<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>
<!-- required: dojo.js -->
<script type="text/javascript" src="../../../dojo/dojo.js"
data-dojo-config="isDebug: true, parseOnLoad: true"></script>
<!-- only needed for alternate theme testing: -->
<script type="text/javascript" src="../_testCommon.js"></script>
<script type="text/javascript">
dojo.require("dijit.dijit"); // optimize: load dijit layer
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.Tree");
dojo.require("dijit.ColorPalette");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
</script>
</head>
<body class="claro" role="main">
<h1 class="testTitle">Dijit Tree V1 API Test</h1>
<p>
This file is for testing the old Tree API's, where the store is specified directly
rather than specifying a model which connects to a store.
</p>
<div dojoType="dojo.data.ItemFileReadStore" jsId="continentStore"
url="../_data/countries.json"></div>
<h3>Tree with hardcoded root node (not corresponding to any item in the store)</h3>
<p>Clicking a folder node will open/close it (openOnclick==true), and clicking a leaf node will change the display name of the leaf node.</p>
<div dojoType="dijit.Tree" id="mytree" store="continentStore" query="{type:'continent'}"
onfocus="console.log('user focus handler')"
onblur="console.log('user blur handler')"
label="Continents" openOnClick="true" persist="false">
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="item">
this.getNodesByItem(item)[0].labelNode.innerHTML=item.name[0] + " was clicked";
</script>
</div>
<button onclick="dijit.byId('mytree').destroyRecursive();">destroy</button>
<h2>A rootless tree (no "continents" node) with custom icons</h2>
<div dojoType="dijit.Tree" id="tree2" store="continentStore" query="{type:'continent'}" persist="false">
<script type="dojo/method" event="getIconClass" args="item, opened">
return (!item || continentStore.getValue(item, "type") == "continent") ?
(opened ? "customFolderOpenedIcon" : "customFolderClosedIcon") :
"noteIcon";
</script>
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="item">
this.getNodesByItem(item)[0].labelNode.innerHTML = item.name[0]
+ " (population: " + continentStore.getValue(item, "population") +")";
</script>
</div>
</body>
</html>