extjs gridPanel 怎么无任何显示

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-3.0.0/ext-all.js"></script>

    <script type="text/javascript">
     
    Ext.onReady(function(){
            var defineData = [
   [1,'张三','男','20'],
   [2,'李四','男','21'],
   [3,'王五','女','22']
];

var defineStore = new Ext.data.SimpleStore({data:defineData,fields:["id","name","sex","age"]});

var defineGrid = new Ext.grid.GridPanel({
 renderTo:"hello",
 title:"706绿色网吧",
 width:150,
 height:600,

 columns:[
    {header:"姓名",dataIndex:"name"},
{header:"性别",dataIndex:"sex"},
{header:"年龄",dataIndex:"age"}
 ],
 
 store:defineStore,
 autoExpandColumn:2

});
   });
    </script>
</head>

<body>
        <div id="hello"></div>  
</body>
</html>