Ext 中 Tree 加载.json 文件为什么只显示根节点

Ext 中 Tree 加载.json 文件为什么只显示根节点js 并没有报错
代码如下
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
        <title>Reorder TreePanel</title>  
 <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />    <!-- GC -->
  <!-- LIBS -->
  <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
  <!-- ENDLIBS -->    <script type="text/javascript" src="../../ext-all.js"></script>
  <link rel="stylesheet" href="../examples.css" type="text/css"> </link> 
<script type="text/javascript" src="../examples.js"> </script> 
        <script type="text/javascript">  
            Ext.BLANK_IMAGE_URL = "images/s.gif"  
            var tree = null;   
            Ext.onReady(function(){   
                // shorthand   
                var Tree = Ext.tree;   
                   
                tree = new Tree.TreePanel({   
                    el:'tree-div',   
                    autoScroll:true,   
                    animate:true,   
                    enableDD:true,   
                    containerScroll: true,    
                    loader: new Tree.TreeLoader({   
                        dataUrl:'03.json'   
                    })   
                });   
  
                   
                tree.on('checkchange', function(node, checked) {   
                    node.expand();   
                    node.attributes.checked = checked;   
                    node.eachChild(function(child) {   
                        child.ui.toggleCheck(checked);   
                        child.attributes.checked = checked;   
                        child.fireEvent('checkchange', child, checked);   
                    });   
                }, tree);   
  
                // set the root node   
                var root = new Tree.AsyncTreeNode({   
                    text: 'root',   
                    draggable:false,   
                    id:'root'   
                });   
  
                tree.setRootNode(root);   
  
                // render the tree   
                tree.render();   
                root.expand();   
            });   
  
  
            var fn = function() {   
                alert(tree.getChecked('id'));   
            };   
  
    </script>  
    </head>  
    <body scroll="no">  
        <b>Checked Nodes: </b> <input type="text" id="cn" value="" size="40" autocomplete="off" /><br />  
        <div id="tree-div" style="overflow:auto; height:300px;width:300px;border:1px solid #c3daf9;"></div>  
        <input type="button" id="gacv" value="getAllCheckedValue" onClick="fn()" />  
    </body>  
</html>  json 文件为 03.json[{id:300,text:'01',cls:'task-folder',children:[{id:'2',text:'01-01',leaf:true, cls:'task'},{id:'3',text:'01-02',children:[{id:'4',text:'01-02-01',leaf:true},{id:'5',text:'01-02-02',leaf:true}]},{id:'6',text:'01-03',leaf:true}]},{id:'7',text:'02',leaf:true}] 

解决方案 »

  1.   

    异步读取节点：首先，底层的service方法要做到每次生成的是传入参数的下一级节点的list，然后在js的 tree.setRootNode(root);下面加上这句：js 代码tree.on('beforeload', function(node){    
    tree.loader.dataUrl = 'createTree.do?id='+node.id;    
    });    tree.loader.dataUrl 的值需要返回的就是该节点id的下一级的json数据数据量大的时候异步加载要好的多，服务层也代码比起一次性全部加载的反复递归调用省不少。
    原码如下所示：
            <div id="east-div">
                east
            </div>
            <div id="tree" style="float:left;width:300px;heigh:600px;background:green;">
                tree
            </div>
            <div id="center-div">
                center
            </div>剩下的就是代码了:
            <script>
                Ext.onReady(function(){
                    //  Ext.MessageBox.alert('helloworld', '你好.');
                    
                    //   var win=new Ext.Window({title:"hello",width:300,height:200,html:'<h1>Hello,easyjf<br> open your source</h1>'});
                    //win.show();
                    
                    //var panel=new Ext.TabPanel({width:300,height:200,items:[ {title:"面板1",height:30},{title:"面板2",height:30},{title:"面板3",height:30}]});
                    var Tree = Ext.tree;
                    
                    var tree = new Tree.TreePanel({
                        el: 'tree',
                        autoScroll: true,
                        animate: true,
                        enableDD: true,
                        width: 600,
                        height: 600,
                        containerScroll: true,
                        loader: new Tree.TreeLoader({
                            dataUrl: 'indexjsontree.jsp?id=父节点id'
                        })
                    });
                    
                    // set the root node    
                    var root = new Tree.AsyncTreeNode({
                        text: '最顶层节点名称',
                        draggable: false,
                        checked: false,
                        id: '1'
                    });
                    tree.setRootNode(root);
                    
                    tree.on('beforeload', function(node){
    //alert(node.id+node.text);
                        tree.loader.dataUrl = 'indexjsontreechecked.jsp?id=' + node.id;
                    });
                    
                    // render the tree    
                    tree.render();
                    root.expand();
                });
            </script>
      

  2.   

    treePanel不能加载 静态的文件..  你可以在js里面写  var data=[{xxxxx}]  然后..  在 var root = new Tree.AsyncTreeNode({ children: data }) 就好了.. 什么都不用加. 但是如果你要用WCF的话. 你就要像 fsdos(网之胜)  那样子做罗~~
      
      

  3.   

    用firebug调试一下，确定是否请求到数据