<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Dijit Tree Test</title> <style type="text/css"> @import "../../../dojo/resources/dojo.css"; @import "../css/dijitTests.css"; </style> <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="parseOnLoad: true, isDebug: true"></script> <script type="text/javascript" src="../_testCommon.js"></script> <script language="JavaScript" type="text/javascript"> dojo.require("dojo.data.ItemFileReadStore"); dojo.require("dijit.Tree"); dojo.require("dijit.ColorPalette"); dojo.require("dijit.Menu"); dojo.require("dojo.parser"); // scan page for widgets and instantiate them </script> </head> <body> <h1 class="testTitle">Dijit Tree Test</h1> <div dojoType="dojo.data.ItemFileReadStore" jsId="continentStore" url="../../tests/_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 popup an alert.</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"> <script type="dojo/method" event="onClick" args="item"> alert("Execute of node " + continentStore.getLabel(item) +", population=" + continentStore.getValue(item, "population")); </script> </div> <button onclick="dijit.byId('mytree').destroyRecursive();">destroy</button> <h2>A rootless tree (no "continents" node) with context menus, and custom icons</h2> <ul dojoType="dijit.Menu" id="tree_menu" style="display: none;"> <li dojoType="dijit.MenuItem" onClick="alert('Hello world');">Enabled Item</li> <li dojoType="dijit.MenuItem" disabled="true">Disabled Item</li> <li dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut" onClick="alert('not actually cutting anything, just a test!')">Cut</li> <li dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy" onClick="alert('not actually copying anything, just a test!')">Copy</li> <li dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconPaste" onClick="alert('not actually pasting anything, just a test!')">Paste</li> <li dojoType="dijit.PopupMenuItem"> <span>Enabled Submenu</span> <ul dojoType="dijit.Menu" id="submenu2"> <li dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</li> <li dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</li> <li dojoType="dijit.PopupMenuItem"> <span>Deeper Submenu</span> <ul dojoType="dijit.Menu" id="submenu4"> <li dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 1!')">Sub-sub-menu Item One</li> <li dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 2!')">Sub-sub-menu Item Two</li> </ul> </li> </ul> </li> <li dojoType="dijit.PopupMenuItem" disabled="true"> <span>Disabled Submenu</span> <ul dojoType="dijit.Menu" id="submenu3" style="display: none;"> <li dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</li> <li dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</li> </ul> </li> </ul> <div dojoType="dijit.Tree" id="tree2" store="continentStore" query="{type:'continent'}"> <script type="dojo/connect"> var menu = dijit.byId("tree_menu"); // when we right-click anywhere on the tree, make sure we open the menu menu.bindDomNode(this.domNode); dojo.connect(menu, "_openMyself", this, function(e){ // get a hold of, and log out, the tree node that was the source of this open event var tn = dijit.getEnclosingWidget(e.target); console.debug(tn); // now inspect the data store item that backs the tree node: console.debug(tn.item); // contrived condition: if this tree node doesn't have any children, disable all of the menu items menu.getChildren().forEach(function(i){ i.setDisabled(!tn.item.children); }); // IMPLEMENT CUSTOM MENU BEHAVIOR HERE }); </script> <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" event="onClick" args="item"> alert("Execute of node " + continentStore.getLabel(item) +", population=" + continentStore.getValue(item, "population")); </script> </div> </body> </html>