+++ /dev/null
-<!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 "../../dojo/resources/dnd.css";
- @import "../../dojo/tests/dnd/dndDefault.css";
- @import "css/dijitTests.css";
-
- .clear {
- clear: both;
- }
-
- .box {
- border: #ccc 3px solid;
- padding: 1em;
- -moz-border-radius: 8px 8px;
- radius: 8px;
- }
-
- label {
- display: inline-block;
- min-width: 8em;
- }
- </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.dnd.Source");
- dojo.require("dojo.data.ItemFileWriteStore");
- dojo.require("dijit.Declaration");
- dojo.require("dijit.Tree");
- dojo.require("dijit.Menu");
- dojo.require("dijit.form.Button");
- dojo.require("dojo.parser"); // scan page for widgets and instantiate them
-
- // Hash of id-->item for all the items (including children) in the data store.
- var items = {};
-
- function deleteItem(){
- store.deleteItem(selectedItem);
-
- resetForms();
- loadItemsTable();
- }
-
- function newItem(){
- var pInfo = selectedItem ? {parent: selectedItem, attribute:"children"} : null;
- console.debug(pInfo);
-
- store.newItem({
- id: dojo.byId('nId').value,
- name: dojo.byId("nLabel").value,
- someProperty: dojo.byId("nSomeProperty").value,
- children: dojo.query("> *", "nChildren").map( function(child){
- var id = child.id;
- return items[id];
- })
- },pInfo);
-
- resetForms();
- loadItemsTable();
- }
-
- function resetForms() {
- selectedItem=null;
-
- // Update item form
- dojo.byId("uLabel").value = "";
- dojo.byId("uSomeProperty").value = "";
-
- dojo.byId("uChildren").innerHTML = "";
- uChildrenDragSource.clearItems();
-
- dojo.byId("uPotentialChildren").innerHTML = "";
- uPotentialChildrenDragSource.clearItems();
-
- // New item form
- dojo.byId("nChildren").innerHTML = "";
- nChildrenDragSource.clearItems();
-
- dojo.byId("nPotentialChildren").innerHTML = "";
- nPotentialChildrenDragSource.clearItems();
- for(var id in items){
- var item = items[id],
- label = store.getLabel(item);
- dojo.byId("nPotentialChildren").innerHTML +=
- "<div class='dojoDndItem' id='" + id + "'>" +
- label +
- "</div>";
- nPotentialChildrenDragSource.setItem(id, {
- data: label,
- type: ["text"]
- });
- }
- }
-
- function updateItem(){
- if (selectedItem!=null){
- if (dojo.byId("uLabel").value != store.getValue(selectedItem, "name")){
- store.setValue(selectedItem, "name", dojo.byId("uLabel").value);
- }
-
- if (dojo.byId("uSomeProperty").value != store.getValue(selectedItem, "someProperty")){
- store.setValue(selectedItem, "someProperty", dojo.byId("uSomeProperty").value);
- }
-
- var children = dojo.query("> *", "uChildren").map( function(child){
- var id = child.id;
- return items[id];
- });
- store.setValues(selectedItem, "children", children);
-
- resetForms();
- loadItemsTable();
- }else{
- console.error("Can't update the tree root");
- }
- }
-
- dojo.addOnLoad(function(){
- resetForms();
- loadItemsTable();
- });
-
- function loadItemsTable(){
- // summary: for each item in the datastore generate a row in the table
-
- function processItem(item){
- items[store.getIdentity(item)] = item;
-
- var vals = {
- itemId: store.getIdentity(item),
- label: store.getLabel(item),
- someProperty: store.getValue(item, "someProperty"),
- children: store.getValues(item, "children")
- };
-
- // add this item to children list in "new item" form
- dojo.byId("nPotentialChildren").innerHTML +=
- "<div class='dojoDndItem' id='" + vals.itemId + "'>" +
- vals.label +
- "</div>";
- nPotentialChildrenDragSource.setItem(vals.itemId, {
- data: vals.label,
- type: ["text"]
- });
-
- // update table listing items
- var row = new ItemRow(vals);
- dojo.byId("itemsTable").appendChild(row.domNode);
-
- //dojo.forEach(vals.children, processItem);
- }
-
- items = {};
- dijit.registry.byClass("ItemRow").forEach(function(widget){ widget.destroy(); });
- store.fetch({onItem: processItem});
- }
-
- function onSelectItem(item){
- resetForms();
-
- selectedItem = item;
-
- if(item){
- // Display basic attribute values
- dojo.byId('uLabel').value = item ? store.getLabel(item) : "";
- dojo.byId('uSomeProperty').value = item ? store.getValue(item,"someProperty") : "";
-
- // Fill in info about children
- var children = store.getValues(item, "children");
- dojo.forEach(children, function(item){
- var id = store.getIdentity(item),
- label = store.getLabel(item);
- dojo.byId("uChildren").innerHTML +=
- "<div class='dojoDndItem' id='" + id + "'>" +
- label +
- "</div>";
- uChildrenDragSource.setItem(id, {
- data: label,
- type: ["text"]
- });
-
- dojo.byId('nParent').value = item ? store.getLabel(item) : "";
- });
-
- // and the items that could be children but aren't currently
- // (including items that would cause cycles, because i'm lazy)
- for(var id in items){
- var item = items[id];
- if(dojo.indexOf(children, item) == -1){
- var label = store.getLabel(item);
- dojo.byId("uPotentialChildren").innerHTML +=
- "<div class='dojoDndItem' id='" + id + "'>" +
- label +
- "</div>";
- uPotentialChildrenDragSource.setItem(id, {
- data: label,
- type: ["text"]
- });
- }
- }
- }
- }
- </script>
-
-</head>
-<body>
-
- <h1 class="testTitle">Dijit Tree Test - dojo.data.Notification API support</h1>
-
- <div dojoType="dojo.data.ItemFileWriteStore" jsId="store"
- url="../tests/_data/treeTest.json"></div>
- <div dojoType="dijit.tree.TreeStoreModel" jsId="model"
- store="store" query="{id:'root'}"></div>
- <div dojoType="dijit.Tree" id="myTree" model="model" onClick="onSelectItem"></div>
-
- <br />
- <h2>Selected Item:</h2>
- <div class="box">
- <label for="uLabel">Name:</label> <input id="uLabel" width="50" value="Enter Node Label" /><br />
- <label for="uSomeProperty">Description:</label> <input id="uSomeProperty" width="50" value="Some Test Property" /><br /><br />
- <div style="float:left; margin-right: 2em;">
- <label for="uChildren">Children (in order):</label>
- <div dojoType="dojo.dnd.Source" class="container" id="uChildren" jsId="uChildrenDragSource"></div>
- </div>
- <div style="float:left">
- <label for="uPotentialChildren">Potential Children:</label>
- <div dojoType="dojo.dnd.Source" class="container" id="uPotentialChildren" jsId="uPotentialChildrenDragSource"></div>
- </div>
- <div class="clear">(drag and drop items to adjust list of children, and order of those children)</div>
- </div>
- <div dojoType="dijit.form.Button" iconClass="noteIcon" onClick="updateItem();">Update Item</div>
- <div dojoType="dijit.form.Button" iconClass="noteIcon" onClick="deleteItem();">Delete Item</div>
-
- <h2>New Item</h2>
- <p>Enter an Id, Name, and optionally a description to be added as a new item to the store. Upon successful addition, the tree will recieve notification of this event and respond accordingly. If you select a node the item will be added to that node, otherwise the item will be added to the tree root. "Id" is the identifer here and as such must be unique for all items in the store.</p>
- <div class="box">
- <label for="nId">Id:</label> <input id="nId" width="50" value="Enter Item Id" /><br />
- <label for="nLabel">Name:</label> <input id="nLabel" width="50" value="Enter Item Name" /><br />
- <label for="nSomeProperty">Description:</label> <input id="nSomeProperty" width="50" value="Enter Some Property Value" /><br /><br />
- <label for="nParent">Parent:</label> <input id="nParent" readonly /><br /><br />
- <div style="float:left; margin-right: 2em;">
- Children (in order):
- <div dojoType="dojo.dnd.Source" class="container" id="nChildren" jsId="nChildrenDragSource"></div>
- </div>
- <div style="float:left">
- <label for="nPotentialChildren">Potential Children:</label>
- <div dojoType="dojo.dnd.Source" class="container" id="nPotentialChildren" jsId="nPotentialChildrenDragSource"></div>
- </div>
- <div class="clear">(drag and drop items to adjust list of children, and order of those children)</div>
- </div>
-
- <div dojoType="dijit.form.Button" iconClass="noteIcon" onClick="newItem();">Add Item to Store</div>
- <br />
-
- <h2>Data in flat form</h2>
- <!--
- flat view of the items in the data store.
- TODO: use the table widget from the mail demo, or dojox.Grid
- -->
- <div dojoType="dijit.Declaration" widgetClass="ItemRow" defaults="{ item: {}, itemId: 'thud', name: 10, someProperty: 'foo', children: {} }">
- Id: ${itemId}, Name: ${name}
-
- Children:
- <span class="dijitInline" dojoAttachPoint="childrenContainerNode"></span>
-
- <script type='dojo/connect' event='postCreate'>
- dojo.forEach(this.children, function(childItem){
- this.childrenContainerNode.innerHTML += "<span class='itemReference'>" + store.getLabel(childItem) + "</span>";
- }, this);
- </script>
- </div>
- <div id="itemsTable"></div>
- </body>
-</html>
-
-
-
-
projects / eow / blobdiff