Tree Sample with much much data

by schlomm

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/resources/dojo.css">
<div id="appLayout" class="demoLayout"></div>

CSS

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

#appLayout {
  height: 100%;
}

#leftCol {
  width: 14em;
}

JavaScript

dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");

dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.Tree");

dojo.ready(function() {
  var appLayout = new dijit.layout.BorderContainer({
    design: "headline"
  }, dojo.byId("appLayout"));

  var contentTabs = new dijit.layout.TabContainer({
    region: "center",
    id: "contentTabs",
    tabPosition: "bottom",
    "class": "centerPanel",
    href: "contentCenter.html"
  });

  appLayout.addChild(contentTabs);

  var topPane = new dijit.layout.ContentPane({
    region: "top",
    "class": "edgePanel",
    content: "Header content (top)"
  });

  appLayout.addChild(topPane);

  var leftPane = new dijit.layout.ContentPane({
    region: "left",
    id: "leftCol",
    "class": "edgePanel",
    content: "Sidebar content (left)",
    splitter: true
  });

  appLayout.addChild(leftPane);

  var store = new dojo.data.ItemFileWriteStore({
    data: continentData
  });

  var treeModel = new dijit.tree.ForestStoreModel({
    store: store,
    query: {
      "type": "continent"
    },
    rootId: "root",
    rootLabel: "Continents",
    childrenAttrs: ["children"]
  });

  var contentTree = new dijit.Tree({
    model: treeModel,
    persist: false,
    showRoot: false,
    getIconClass: function(item, opened) {
      console.log('tree getIconClass', item, opened);

      //console.log('tree item type', store.getValue(item, 'type'));
      console.log('tree item type', item.type);
    }
  });

  dojo.connect(contentTree, "onClick", function(item, node, evt) {
    console.log('content tree clicked', item, node, evt);
  });

  var tryButton = dojo.create('button', {
    innerHTML: 'try'
  });
  var paneLayout = new dijit.layout.BorderContainer({
    design: 'headline'
  });
  paneLayout.addChild(new dijit.layout.ContentPane({
    region: 'top',
    content: tryButton
  }));
  paneLayout.addChild(new dijit.layout.ContentPane({
   ...