为什么GRID列表在网页无显示- -新人求指导

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!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>grid</title>
<link rel="stylesheet" type="text/css" href="EXT/resources/css/ext-all.css"/>
<script type="text/javascript" src="EXT/ext-all.js"></script>
<script type="text/javascript" src="EXT/bootstrap.js"></script>  
<script type="text/javascript">
Ext.onReady(function() {
var myData = [
['Apple',29.89,0.24,0.81,'9/1 12:00am'],
['Ext',83.81,0.28,0.34,'9/12 12:00am'],
['Google',71.72,0.02,0.03,'10/1 12:00am'],
['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
];
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
])
});
ds.load();
var colModel = new Ext.grid.ColumnModel([
{header: "Company", width: 120, sortable: true, dataIndex:'company'},
{header: "Price", width: 90, sortable: true, dataIndex: 'price'},
{header: "Change", width: 90, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 90, sortable: true, dataIndex:'pctChange'},
{header: "Last Updated", width: 120, sortable: true,
/*renderer: Ext.util.Format.dateRenderer('m/d/Y'),*/ dataIndex:'lastChange'}
]);
var grid = new Ext.grid.GridPanel({
el:"grid",
ds: ds, 
cm: colModel
});
grid.render();
});</script>
</head>
<body>
<div id='grid'></div>
</body>
</html>EXTJS