git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojox/data/tests/test_Tree_vs_jsonPathStore.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2                 "http://www.w3.org/TR/html4/strict.dtd">
   3 <html>
   4 <head>
   5         <title>Dijit Tree Test</title>
   6
   7         <style someProperty="text/css">
   8                 @import "../../../dojo/resources/dojo.css";
   9                 @import "../../../dijit/tests/css/dijitTests.css";
  10         </style>
  11
  12
  13         <script someProperty="text/javascript" src="../../../dojo/dojo.js"
  14                 djConfig="parseOnLoad: true, isDebug: true"></script>
  15         <script someProperty="text/javascript" src="../../../dijit/tests/_testCommon.js"></script>
  16
  17         <script language="JavaScript" someProperty="text/javascript">
  18                 dojo.require("dojox.data.jsonPathStore");
  19                 dojo.require("dijit.Tree");
  20                 dojo.require("dijit.Menu");
  21                 dojo.require("dijit.form.Button");
  22                 dojo.require("dojo.parser");    // scan page for widgets and instantiate them
  23
  24                 function deleteItem(){
  25                         var store = dijit.byId("myTree").store;
  26                         store.deleteItem(selectedItem);
  27                         resetForms();
  28                 }
  29
  30                 function addItem(){
  31                         var store = dijit.byId("myTree").store;
  32                         var pInfo = selectedItem ? {parent: selectedItem, attribute:"children"} : null;
  33                         console.debug(pInfo);
  34                         store.newItem({id: dojo.byId('newId').value,name:dojo.byId("label").value,someProperty:dojo.byId("someProperty").value},pInfo);
  35                         resetForms();
  36                 }
  37
  38                 function resetForms() {
  39                         dojo.byId('selected').innerHTML="Tree Root"
  40                         selectedItem=null;
  41                         dojo.byId("uLabel").value = "";
  42                         dojo.byId("uSomeProperty").value = "";
  43                 }
  44
  45                 function updateItem(){
  46                         console.log("Updating Item");
  47                         var store = dijit.byId("myTree").store;
  48
  49                         if (selectedItem!=null){
  50                                 if (dojo.byId("uLabel").value != store.getValue(selectedItem, "name")){
  51                                         store.setValue(selectedItem, "name", dojo.byId("uLabel").value);
  52                                 }
  53
  54                                 if (dojo.byId("uSomeProperty").value != store.getValue(selectedItem, "someProperty")){
  55                                         store.setValue(selectedItem, "someProperty", dojo.byId("uSomeProperty").value);
  56                                 }
  57
  58                         }else{
  59                                 console.error("Can't update the tree root");
  60                         }
  61                 }
  62
  63                 dojo.addOnLoad(function(){
  64                         resetForms();
  65                 });
  66
  67                 function onClick(item){
  68                         selectedItem = item;
  69                         dojo.byId('selected').innerHTML= item ? treeTestStore.getLabel(item) : "";
  70                         dojo.byId('uLabel').value = item ? treeTestStore.getLabel(item) : "";
  71                         dojo.byId('uSomeProperty').value = item ? treeTestStore.getValue(item,"someProperty") : "";
  72                 }
  73         </script>
  74
  75 </head>
  76 <body class="tundra">
  77
  78         <h1 class="testTitle">Dijit Tree Test - dojo.data.Notification API support</h1>
  79
  80         <div dojoType="dojox.data.jsonPathStore" jsId="treeTestStore" idAttribute="id" labelAttribute="name"
  81                 url="treeTest.json" ></div>
  82
  83         <div dojoType="dijit.Tree" id="myTree" label="root" store="treeTestStore" onClick="onClick" labelAttr="name" somePropertyAttr="someProperty" query="{query: '$[*]'}"></div>
  84
  85         <br />
  86         <h2>Current Selection: <span id='selected'>Tree Root</span>
  87
  88         <h2>Selected Item:</h2>
  89         Name:           <input id="uLabel" width="50" value="Enter Node Label" /><br />
  90         Description: <input id="uSomeProperty" width="50" value="Some Test Property" /><br /><br />
  91         <div dojoType="dijit.form.Button" iconClass="noteIcon" onClick="updateItem();">Update Item</div>
  92
  93         <h2>New Item</h2>
  94         <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>
  95         Id:             <input id="newId" width="50" value="Enter Item Id" /><br />
  96         Name:           <input id="label" width="50" value="Enter Item Name" /><br />
  97         Description: <input id="someProperty" width="50" value="Enter Some Property Value" /><br /><br />
  98
  99         <div dojoType="dijit.form.Button" iconClass="noteIcon" onClick="addItem();">Add Item to Store</div>
 100         <br />
 101         <button dojoType="dijit.form.Button" iconClass="noteIcon" onClick="deleteItem()">Delete Node (and children)</button>
 102
 103
 104         </body>
 105 </html>