dojo tree sample

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'});
   ...