EXTJs 树的实现

 <script type="text/javascript">
         Ext.onReady(function()
             {
                 //树形结构
                 //创建一棵树：
                 var tree = new Ext.tree.TreePanel(
                     {el:'tree'}//表示渲染的DOM的id.界面中有<div id = "tree"></div>相对应最后这棵树就出现在这个div位置上
                 );
                 //创建根节点：
                 var root = new Ext.tree.TreeNode({text:'山东'});
                 tree.setRootNode(root);//把根节点添加到树中
                 tree.render();//对树进行渲染
                 //添加枝叶
                 var node1 = new Ext.tree.TreeNode({text:'济南'});
                 var node11 = new Ext.tree.TreeNode({text:'市中区'});
                 var node12 = new Ext.tree.TreeNode({text:'章丘市'});
                 var node2 = new Ext.tree.TreeNode({text:'青岛'});
                 var node21 = new Ext.tree.TreeNode({text:'黄岛区'});
                 var node22 = new Ext.tree.TreeNode({text:'城阳区'});
                 var node3 = new Ext.tree.TreeNode({text:'淄博'});
                 var node31 = new Ext.tree.TreeNode({text:'沂源'});
                 var node32 = new Ext.tree.TreeNode({text:'张店'});
                 var node33 = new Ext.tree.TreeNode({text:'博山'});

                 root.appendChild(node1);
                 root.appendChild(node2);
                 root.appendChild(node3);

                 node1.appendChild(node11);
                 node1.appendChild(node12);

                 node2.appendChild(node21);
                 node2.appendChild(node22);

                 node3.appendChild(node31);
                 node3.appendChild(node32);
                 node3.appendChild(node33);

                 root.expand(true,true);//加载后立即展开树
             }
         );
     </script>

使用TreeLoader加载数据：