Problem with a simple dojo tree loading_问答_开发者

开发者 https://www.devze.com 2023-03-21 23:29 出处：网络

This simple dojo tree doesn\'t load. The dojo.require calls are added to the addOnLoad function.What could be the problem?

相关专题：dojo tree

This simple dojo tree doesn't load. The dojo.require calls are added to the addOnLoad function. What could be the problem?

<html>
<head>
    <meta charset="utf-8">
    <title>Programmatic Dojo Tree Demo</title>
    <!-- load Dojo -->
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"></script>

<script type="text/javascript">
var treeDat = {
    treeNodes: [
        { title:"World" },
        { title:"Business",
            children:[
                { title:"News",
                    children:[
                        { title:"Main"},
                        { title:"Company News" },
                        { title:"Economy" }
                    ]
                },
                { title:"Markets" },
                { title:"Technology" },
                { title:"Jobs and Economy" }
            ]
        },
        { title:"Sports" }
    ]
};
</script>

<script type="text/javascript">
var TreeBuilder = {
    buildTreeNodes:function (dataObjs, treeParentNode){
        for(var i=0; i<dataObjs.le开发者_如何转开发ngth;i++){
            var node =  dojo.widget.createWidget("TreeNode",{
                title:dataObjs[i].title,
                expandLevel:99,
                widgetId:(((treeParentNode)?treeParentNode.widgetId:"root_")+"_"+i)
            });
            treeParentNode.addChild(node);
            treeParentNode.registerChild(node,i);
            if(dataObjs[i].children){
                this.buildTreeNodes(dataObjs[i].children, node);
            }
        }
    },
    buildTree:function (){
        var myTreeWidget = dojo.widget.createWidget("Tree",{
            widgetId:"myTreeWidget",
            DNDMode:"between",
            DNDAcceptTypes:["myTreeWidget"]
        });
        this.buildTreeNodes(treeDat.treeNodes,myTreeWidget);
        var treeContainer = document.getElementById("myWidgetContainer");
        var placeHolder = document.getElementById("treePlaceHolder");
        treeContainer.replaceChild(myTreeWidget.domNode,placeHolder);
    }
}
function addTreeContextMenu(){
    var djWdgt = dojo.widget;
    var ctxMenu = djWdgt.createWidget("TreeContextMenu",{});
    ctxMenu.addChild(djWdgt.createWidget(
        "TreeMenuItem",{caption:"Add Child Menu Item"}));
    ctxMenu.addChild(djWdgt.createWidget(
        "TreeMenuItem",{caption:"Delete This Menu Item"}));
    document.body.appendChild(ctxMenu.domNode);
    var myTree = dojo.widget.manager.getWidgetById("myTreeWidget");
    /* Bind the context menu to the tree */
    ctxMenu.listenTree(myTree);
}

dojo.addOnLoad(function(){
    dojo.require("dojo.lang.*");
    dojo.require("dojo.widget.Tree");

    TreeBuilder.buildTree();
    addTreeContextMenu();
    });
</script>

</head>
<body>
<h1>Programmatic Dojo Tree Demo</h1>
<hr />

<div id="myWidgetContainer"
    style="width: 17em; border: solid #888 1px; height:300px;">
    <span id="treePlaceHolder"
        style="background-color:#F00; color:#FFF;">
        Loading tree widget...
    </span>
</div>

</body>
</html>

I think you are looking at some really old code snippets (as in Dojo <1.0). This isn't how you make widgets anymore. Take a look at http://docs.dojocampus.org/dijit/Tree for some up to date examples.