| New file |
|---|
| 0,0 → 1,111 |
|---|
| <!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 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 = 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 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"> |
| return "noteIcon"; |
| </script> |
| </div> |
| |
| </body> |
| </html> |