dojo dijit tree : how to manage parents, child and leaf nodes?

Question

I have a dijit tree representing menu items, some have childs, other are leaf nodes.

I would like to know how to write this in javascript, which attribute to use when I have a normal node with childs and a leaf node? How to write : in this case use a folder Icon, and in the other a leaf icon.

There is my code :

<script>

require([
     "dojo/_base/window", "dojo/store/Memory",
     "dijit/tree/ObjectStoreModel", "dijit/Tree", "dojo",
     "dojo/domReady!", "dojo/parser"
 ], function(win, Memory, ObjectStoreModel, Tree, dojo){

     // Create test store, adding the getChildren() method required by ObjectStoreModel
     var myStore = new Memory({
         data: [
            { id: 1, name: 'Menu', url: 'http://dojotoolkit.org/api/1.6/dijit.Tree', root: true, directory: true },
            { id: 2, name: 'Folder1', url: 'http://dojotoolkit.org/api/1.6/dijit.Tree', parent: 1, directory: false},
            { id: 3, name: 'Leaf1', url: 'http://dojotoolkit.org/api/1.6/dijit.Tree.model', parent: 2 },
            { id: 4, name: 'Leaf2', url: 'http://dojotoolkit.org/api/1.6/dijit.tree.ForestStoreModel', parent: 2 },
            ...
            ],
         getChildren: function(object){
           return this.query({parent: object.id});
         }
     });

     // Create the model
     var myModel = new ObjectStoreModel({
         store: myStore,
         query: {root: true}
     });

     // Create the Tree, specifying an onClick method
     (new Tree({
         model: myModel,
 getIconClass:function(item, opened){
               return myStore.getValue(item, 'directory') ? (opened ? "dijitFolderOpened" : "dijitFolderClosed") : "dijitLeaf";
            },
         onClick: function(item){
             // Get the URL from the item, and navigate to it
             // location.href = item.url; 
             //parent.getElementById('central').src = item.url;
             parent.central.location.href = item.url;
         }
     })).placeAt(win.body()).startup();
});
</script>

But it doesn't work.
I tried with the directory attribute for the first and the second item inside myStore, but i get an error when loading the getIconClass: "myStore is undefined".

Thanks for help

Answer 1

It looks like you are mixing the usage of the legacy dojo/data/store and the newer dojo/store APIs. There is no getValue method on the dojo/store apis.

Here is a working version :

// Code goes here

require([ "dojo/_base/window", "dojo/dom", "dojo/store/Memory", "dijit/tree/ObjectStoreModel", "dijit/Tree", "dojo/domReady!" ], function(win, dom, Memory, ObjectStoreModel, Tree, dojo){

 // Create test store, adding the getChildren() method required by ObjectStoreModel
 var myStore = new Memory({
     data: [
        { id: 1, name: 'Menu', url: 'http://dojotoolkit.org/api/1.6/dijit.Tree', root: true, directory: true },
        { id: 2, name: 'Folder1', url: 'http://dojotoolkit.org/api/1.6/dijit.Tree', parent: 1, directory: false},
        { id: 3, name: 'Leaf1', url: 'http://dojotoolkit.org/api/1.6/dijit.Tree.model', parent: 2 },
        { id: 4, name: 'Leaf2', url: 'http://dojotoolkit.org/api/1.6/dijit.tree.ForestStoreModel', parent: 2 }
        ],
     getChildren: function(object){
       return this.query({parent: object.id});
     }
 });

 // Create the model
 var myModel = new ObjectStoreModel({
     store: myStore,
     query: {root: true}
 });

 // Create the Tree, specifying an onClick method
 (new Tree({
     model: myModel,
     getIconClass:function(item, opened){
             // You already have the item. No use to try and refetch it from the store
             return item.directory ? (opened ? "dijitFolderOpened" : "dijitFolderClosed") : "dijitLeaf";
         },
         onClick: function(item){
             // Get the URL from the item, and navigate to it
             parent.central.location.href = item.url;
         }
     })).placeAt(win.body()).startup();
});

See http://plnkr.co/edit/11Z20MpsZyShh1E0Ai7k?p=catalogue