Ext中关于树的一个小问题

为什么我用ext画出来的树，当鼠标放上去后会有个黑色的方框源码：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> tree</TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../../src/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
function createTree(){
var tree=new Ext.tree.TreePanel({
el:"tree",
animate:true
});
var root=new Ext.tree.TreeNode({text:'root'});
var node1=new Ext.tree.TreeNode({text:'第一个节点'});
var node2=new Ext.tree.TreeNode({text:'第二个节点',leaf:true});
var node3=new Ext.tree.TreeNode({text:'第一个节点的子节点'});
node1.appendChild(node2);
root.appendChild(node1);
root.appendChild(node3);
tree.setRootNode(root);
tree.render();
tree.expand();
}
Ext.onReady(function(){
createTree();
});
</script>
 </HEAD> <BODY>
 <div width="300px">
  <div id="tree"style="height:300px;width:100px;margin-left:2px;"></div>
  </div>
 </BODY>
</HTML>