Extjs 树导航的简单例子

Ext.onReady(function(){
   Ext.QuickTips.init();
     var tree=new   Ext.tree.TreePanel({
    //   el:"tree"
   });

    var root=new Ext.tree.TreeNode({text:'项目信息'});
    var node=new Ext.tree.TreeNode({
        text:"项目资料"

    });
    var node1=new Ext.tree.TreeNode({
        text:'标段信息'

    });
    var node2=new Ext.tree.TreeNode({
        text:"合同清单"

    });
    var node3=new Ext.tree.TreeNode({
        text:"形象清单"
     
    });
    root.appendChild(node);
    root.appendChild(node1);
    root.appendChild(node2);
    root.appendChild(node3);
    tree.setRootNode(root);

    tree.on("click",function(node){
         var text=node.text;
        var mainPanel=Ext.getCmp("main"); //中间主Panel
        var url="";
        if(text=="项目信息") url="a.jsp";
        if(text=="项目资料") url="b.jsp";
        if(text=="标段信息") url="c.jsp";
        if(text=="合同清单") url="d.jsp";
        if(text=="形象清单") url="e.jsp";
    
        mainPanel.load({
            url:url,
            nocache:true,
            text:"正在加载中......",
            timeout:30,
            scripts:true
        });
    
    });
 
   var viewport=new Ext.Viewport({
       layout:"border",
       items:[{
           region:"west",
           width:200,
           layout:"accordion",
           layoutConfig:{
               titleCollapse:true,
               animate:true,
               activeOnTop:false
           },
           items:[{
               title:"第一栏",
               items:[tree],
               html:"第一栏"
           },{
               title:"第二栏",
               html:"第二栏"
           },{
               title:"第三栏",
               html:"第三栏"
           }]
       },{
          region:"center",
           split:true,
           border:true,
           id:"main"
       }

       ]

   });
 
  
});