ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Updated

Browse Source
This commit is contained in:
Éric Lemoine
2013-02-20 10:38:25 +01:00
parent 17c3936ab6
commit 5d14b9e2d4
1919 changed files with 559755 additions and 2588 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
master/examples/test_Tree.html Normal file
View File

@@ -0,0 +1,176 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Dijit Tree Test</title>
<style type="text/css">
@import "../../themes/claro/document.css";
@import "../css/dijitTests.css";
</style>
<!-- required: a 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="parseOnLoad: true, isDebug: true"></script>
<!-- not needed, for testing alternate themes -->
<script type="text/javascript" src="../_testCommon.js"></script>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.dijit"); // optimize: load dijit layer
dojo.require("dijit.Tree");
dojo.require("dijit.tree.ForestStoreModel");
dojo.require("dijit.ColorPalette");
dojo.require("dijit.Menu");
dojo.require("dijit.MenuItem");
dojo.require("dijit.PopupMenuItem");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
</script>
</head>
<body class="claro">
<h1 class="testTitle">Dijit Tree Test</h1>
<div data-dojo-id="continentStore" data-dojo-type="dojo.data.ItemFileReadStore" 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>
<h2>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>
<div id="mytree" data-dojo-type="dijit.Tree" 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>
</div>
<button onclick="dijit.byId('mytree').destroyRecursive();">destroy</button>
<h2>A rootless tree (no "continents" node) with context menus, and custom icons</h2>
<ul id="tree_menu" data-dojo-type="dijit.Menu" data-dojo-props='style:"display: none;"'>
<li data-dojo-type="dijit.MenuItem" data-dojo-props='onClick:function(){ console.log("Hello world"); }'>Enabled Item</li>
<li data-dojo-type="dijit.MenuItem" data-dojo-props='disabled:true'>Disabled Item</li>
<li data-dojo-type="dijit.MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCut",
onClick:function(){ console.log("not actually cutting anything, just a test!") }'>Cut</li>
<li data-dojo-type="dijit.MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCopy",
onClick:function(){ console.log("not actually copying anything, just a test!") }'>Copy</li>
<li data-dojo-type="dijit.MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconPaste",
onClick:function(){ console.log("not actually pasting anything, just a test!") }'>Paste</li>
<li data-dojo-type="dijit.PopupMenuItem">
<span>Enabled Submenu</span>
<ul id="submenu2" data-dojo-type="dijit.Menu" >
<li data-dojo-type="dijit.MenuItem" data-dojo-props='onClick:function(){ console.log("Submenu 1!") }'>Submenu Item One</li>
<li data-dojo-type="dijit.MenuItem" data-dojo-props='onClick:function(){ console.log("Submenu 2!") }'>Submenu Item Two</li>
<li data-dojo-type="dijit.PopupMenuItem">
<span>Deeper Submenu</span>
<ul id="submenu4" data-dojo-type="dijit.Menu" >
<li data-dojo-type="dijit.MenuItem" data-dojo-props='onClick:function(){ console.log("Sub-submenu 1!") }'>Sub-sub-menu Item One</li>
<li data-dojo-type="dijit.MenuItem" data-dojo-props='onClick:function(){ console.log("Sub-submenu 2!") }'>Sub-sub-menu Item Two</li>
</ul>
</li>
</ul>
</li>
<li data-dojo-type="dijit.PopupMenuItem" data-dojo-props='disabled:true'>
<span>Disabled Submenu</span>
<ul id="submenu3" data-dojo-type="dijit.Menu" data-dojo-props='style:"display: none;"'>
<li data-dojo-type="dijit.MenuItem" data-dojo-props='onClick:function(){ console.log("Submenu 1!") }'>Submenu Item One</li>
<li data-dojo-type="dijit.MenuItem" data-dojo-props='onClick:function(){ console.log("Submenu 2!") }'>Submenu Item Two</li>
</ul>
</li>
</ul>
<div id="tree2" data-dojo-type="dijit.Tree" data-dojo-props='model:continentModel, showRoot:false, openOnClick:true,onLoad:function(){ console.log("loaded tree2 (second tree)"); }'>
<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
dojo.forEach(menu.getChildren(), function(i){ i.set('disabled', !tn.item.children); });
// IMPLEMENT CUSTOM MENU BEHAVIOR HERE
});
</script>
<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>
<h2>Double click, expand on load, direct style setting, tooltip test</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>
<div id="mytree3" 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>
</body>
</html>