//html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tree</title>
      <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"></link>
      <script src="ext/adapter/ext/ext-base.js"></script>
<script src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/src/locale/ext-lang-zh_CN.js"></script><link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"></link>
<script src="ext/adapter/ext/ext-base.js"></script>
<script src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/src/locale/ext-lang-zh_CN.js"></script>
    <script> 

  Ext.onReady(function(n) {
  Ext.BLANK_IMAGE_URL='ext/resources/images/default/s.gif';
    var Tree = Ext.tree;
    var tree = new Tree.TreePanel( {
el : 'tree-div',//目标div容器
autoScroll : true,  /*True表示为在面板body元素上出现滚动条*/
animate : true, /*True表示为转换状态时出现动画*/
enableDD : true,  //不允许子节点拖动  
        split:true,//设置分隔条 
        rootVisible: false,
collapsible:true,//可以进行缩进 
collapseMode:'mini',//设置左右缩减
containerScroll : true,
listeners:{   /*单击监听*/
'click':function(n){
var flag= n.attributes.leaf;
    Ext.Msg.alert('tip');
if(flag==true){
var text = n.attributes.text;
addTab(text);
}
}},
   loader : new Tree.TreeLoader( {
                       dataUrl : 'json.txt' /*动态载入数据的请求地址,*/
        })
                   });
                     var root = new Tree.AsyncTreeNode( { // 树的根节点对象
            text : '树的父根',
            draggable : false,
            id : '-1'     //默认的node值:?node=-1
           });
      tree.setRootNode(root);  //在初始化的时候设置root为根节点
      tree.render();   //执行容器的渲染,可以将渲染执行在送入的HTML元素上面。
     root.expand();   //转换状态时出现动画
     });  
</script>
</head>
<body>
<div id="tree-div" style="overflow:auto; height:100%;width:20%;border:2px solid #c3daf9;"></div>
</body>
</html>
//json
[{"text":"aa","id":"2"},
{"text":"bb","id":"3"},
{"text":"cc","id":"4"},
{"text":"dd","id":"5"}]