Complex Dijit Tree

by schlomm

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css">
<div id="rootLayout" data-dojo-type="dijit/layout/LayoutContainer">
  <div class="existingItemsSection" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
    <div data-dojo-type="dijit/Tree" id="governmentTree"></div>
  </div>
  <div class="commandSection" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'">
    <button id="RefreshButton" data-dojo-type="dijit/form/Button">Refresh</button>
    <button id="CloseButton" data-dojo-type="dijit/form/Button">Close</button>
  </div>
</div>

CSS

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

#rootLayout {
  width: 100%;
  height: 100%;
}

.commandSection {
	text-align: right;
}

JavaScript

var ui = {};
require(["dojo/ready", "dojo/dom-construct", "dojo/number"],

  function(ready, domConstruct, number) {
    ready(function() {

    });
  });
require(['dojo/store/Memory', "dijit/tree/ObjectStoreModel", 'dijit/Tree', "dojo/domReady!"],
  function(Memory, ObjectStoreModel, Tree) {

    var data = [{
      "name": "US Government",
      "id": "root",
      "children": [{
        "name": "Congress",
        "id": "congress"
      }, {
        "name": "Executive",
        "id": "exec"
      }, {
        "name": "Judicial",
        "id": "judicial"
      }]
    }];

    var governmentStore = new Memory({
      data: data,
      getChildren: function(object) {
        return object.children || [];
      }
    });

    var governmentModel = new ObjectStoreModel({
      store: governmentStore,
      query: {
        id: 'root'
      },
      mayHaveChildren: function(item) {
        return "children" in item;
      }
    });

    ui.governmentTree = new Tree({
      model: governmentModel,
      onOpenClick: true
    }, "governmentTree");

    ui.governmentTree.startup();

  });

//Parse widgets and setup ui variable for easy access
require(["dojo/parser", "dojo/ready", "dijit/registry", "dojo/_base/array"],

  function(parser, ready, registry, array) {
    ready(100, function() {
      parser.parse().then(function() {
        array.forEach(registry.toArray(), function(instance) {
          ui[instance.id] = instance;
        });
      }).otherwise(function(e) {
        alert("Error parsing document: " + e.message);
      });
    });
  });