Hansard Tree

by holf

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojox/widget/SortList/SortList.css">
<div id="container">
    <div id="treeOne"></div>
</div>

CSS

#container { padding: 20px;}

JavaScript

dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.Tree");
dojo.require("dijit.Menu");
dojo.require("dijit.MenuItem");


function prepare() {
    var store = new dojo.data.ItemFileReadStore({
        data: {
            identifier: 'id',
            label: 'label',
            items: rawdata

        }
    });

    var treeControl = new dijit.Tree({
        store: store,
        showRoot: false,
        persist: false,
        autoExpand: false,

        openOnDblClick: true
    }, "treeOne");

    var menu = new dijit.Menu();
    menu.bindDomNode(treeControl.domNode);
    menu.addChild(new dijit.MenuItem({
        label: "Simple menu item"
    }));

    dojo.connect(treeControl, "onClick", treeControl, function (item, nodeWidget, e) {
        console.log("is expandable?: ", nodeWidget.isExpandable, e.target);

        if (nodeWidget.isExpandable) {
            this._onExpandoClick({
                node: nodeWidget
            });
        }
        console.log("item : ", item);

    });

    dojo.connect(menu, "_openMyself", this, function (e) {
        var tn = dijit.getEnclosingWidget(e.target);
        // prepare the menu
        dojo.forEach(menu.getChildren(), function (child) {
            menu.removeChild(child);

            menu.addChild(new dijit.MenuItem({
                label: "dynamic " + store.getLabel(tn.item)
            }));
        }, this);

    });

    menu.startup();
}

dojo.ready(prepare);




var rawdata = [{
    label: 'Inline Procedural Elements',
    id: 'IPEs',
    children: [{
        label: 'Inline Member',
        id: '1.1',
        active: true
    }, {
        label: 'Interruption',
        id: '1.2',
        active: true
    }]
}, {
    label: 'Procedure Templates',
    id: '2',
    children: [{
        id: '2.1',
        label: 'Front Page',
        active: false,
        children: [{
            label: 'First Page Header',
            id: 'boo',
            active: true
        }, {
            label: 'First...