extjs tree 问题，大侠进来看看

最近需要用ext做页面树效果，看了好多资料，于是下载了最新的ext-4.0.7-gpl
建了一个页面：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'newComposeList.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link href="js/ext-4.0.7/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
     <script src="js/ext-4.0.7/bootstrap.js" type="text/javascript"></script>
     <script type="text/javascript" src="js/ext-4.0.7/ext-all.js"></script>
     <script type="text/javascript" src="js/ext-4.0.7/bootstrap.js"></script>
      <script type="text/javascript" src="js/ext-4.0.7/ext-all-debug.js"></script>
     <script type="text/javascript">
         Ext.onReady(function(){   
         var tree=new Ext.tree.TreePanel({            
         el:'tree',            
         loader:new Ext.tree.TreeLoader()        
         });                
         var root =new Ext.tree.AsyncTreeNode({            
         text:'我是根',            
         children:[{                
         text:'01',
         qtip:'我是鼠标提示'
         children:[{                    
         text:'01-01',                    
         leaf:true
         },{                   
          text:'01-02',                    
          children:[{                        
          text:'01-02-01',                        
          leaf:true                    
          },{                        
          text:'01-02-02',                        
          leaf:true                    
          }]                
          },{                    
          text:'01-03',                    
          leaf:true,                   
           href:"http://www.baidu.com",                    
             hrefTarget:'_blank'                   
           }]            
           },            
           {                
           text:'02',                
           leaf:true,                
            }]        
            });        
            tree.setRootNode(root);        
            tree.render();                
            });
 　　</script>
  </head>
  
  <body>
    <div id="tree"></div> 
  </body>
</html>就这么个简单的静态树，为什么页面没效果呢，使用下面的可以出现效果，想知道这是为什么，
Ext.onReady(function (){
              var tree = Ext.create("Ext.tree.Panel", {
                 title: "Tree示例",
                 el:'tree',
                 width: 150,
                 height: 300,
                 renderTo: Ext.getBody(),
                 root: {
                     text: "根",
                     expanded: true,
                     children: [{
                         text: "叶子1",
                         leaf: true
                     }, {
                         text: "叶子2",
                         leaf: true
                     },{
      text: "公司总部1",
 
      leaf: false,
      children:[{
                         text: "叶子1",
                         leaf: true
                     }, {
                         text: "叶子2",
                         leaf: true
                     }]
}, {
text: "公司总部2",
id: "2",
cls: "folder"
}, {
text: "公司总部3",
id: "3",
 cls: "folder"
}]
                 }
             });
        });两个效果的区别就是上面用的var tree=new Ext.tree.TreePanel({            
         el:'tree',            
         loader:new Ext.tree.TreeLoader()        
         });   这个没效果，下面的用var tree = Ext.create("Ext.tree.Panel", {就可以出现效果，这是为什么呢？Ext JSHTML