Blame | Last modification | View Log | RSS feed
<!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><div dojoType="dijit.Tree" id="mytree" store="continentStore" query="{type:'continent'}"labelAttr="name" label="Continents"><script type="dojo/method" event="onClick" args="item">if(item){alert("Execute of node " + continentStore.getLabel(item)+", population=" + continentStore.getValue(item, "population"));}else{alert("Execute on root node");}</script><script type="dojo/method" event="getIconClass" args="item">return "noteIcon";</script></div><button onclick="dijit.byId('mytree').destroyRecursive();">destroy</button><h2>A rootless tree (no "continents" node) with context menus</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 menumenu.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 eventvar tn = this._domElement2TreeNode(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 itemsmenu.getChildren().forEach(function(i){ i.setDisabled(!tn.item.children); });// IMPLEMENT CUSTOM MENU BEHAVIOR HERE});</script><script type="dojo/method" event="getIconClass" args="item">return "noteIcon";</script></div></body></html>