this.el.dom为空或不是对象

刚开始学习ext不久，照着书上写的例子，就是在页面显示一个表格。

但是运行不起来，抛出了 “this.el.dom为空或不是对象” 的错误。自己已经在网上找过了，也试了很多方法还是不行。

不想在浪费时间，所以来这里寻求帮助，希望知道的朋友指点一二，感激不尽。下面是我全部的代码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>index.jsp</title>
        <link rel="stylesheet" type="text/css"
            href="ExtJS/resources/css/ext-all.css" />
        <script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="ExtJS/ext-all.js"></script>
        <script type="text/javascript">

            var cm = new Ext.grid.ColumnModel([
                {header: '编号', dataIndex: 'id'},
                {header: '名称', dataIndex: 'name'},
                {header: '描述', dataIndex: 'descn'}
            ]);
            var data = [
                ['1', 'name1', 'descn1'],
                ['2', 'name2', 'descn2'],
                ['3', 'name3', 'descn3'],
                ['4', 'name4', 'descn4'],
                ['5', 'name5', 'descn5']
            ];
            var ds = new Ext.data.Store({
                proxy: new Ext.data.MemoryProxy(data),
                reader: new Ext.data.ArrayReader({}, [
                    {name: 'id'},
                    {name: 'name'},
                    {name: 'descn'}
                ])
            });
            ds.load();

            var grid = new Ext.grid.GridPanel({
                el: 'grid',
                ds: ds,
                cm: cm
            });
            grid.render();

        </script>
    </head>
    <body>
        <div id="grid"></div>
    </body>
</html>

补充一点，我用的ExtJS是2.3版本的，难道是版本的问题导致的吗？

JS运行时，DOM节点尚不可用。你可以把JS放到后面，如下：
[code="javascript"]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

index.jsp

</head>
<body>
    <div id="grid"></div>
    <script type="text/javascript">
        var cm = new Ext.grid.ColumnModel([
            {header: '编号', dataIndex: 'id'},
            {header: '名称', dataIndex: 'name'},
            {header: '描述', dataIndex: 'descn'}
        ]);
        var data = [
            ['1', 'name1', 'descn1'],
            ['2', 'name2', 'descn2'],
            ['3', 'name3', 'descn3'],
            ['4', 'name4', 'descn4'],
            ['5', 'name5', 'descn5']
        ];
        var ds = new Ext.data.Store({
            proxy: new Ext.data.MemoryProxy(data),
            reader: new Ext.data.ArrayReader({}, [
                {name: 'id'},
                {name: 'name'},
                {name: 'descn'}
            ])
        });
        ds.load();

        var grid = new Ext.grid.GridPanel({
            el: 'grid',
            ds: ds,
            cm: cm
        });
        grid.render();
    </script>
</body>

[/code]
这里我简单的都放到后面去了，只有把关键一句[code="javascript"]grid.render();[/code]放到后面即可，后面这个也一样。
或者把你的JS放到Ext.ready里面
[code="javascript"]
Ext.ready(function(){
var cm = new Ext.grid.ColumnModel([
{header: '编号', dataIndex: 'id'},
{header: '名称', dataIndex: 'name'},
{header: '描述', dataIndex: 'descn'}
]);
var data = [
['1', 'name1', 'descn1'],
['2', 'name2', 'descn2'],
['3', 'name3', 'descn3'],
['4', 'name4', 'descn4'],
['5', 'name5', 'descn5']
];
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'name'},
{name: 'descn'}
])
});
ds.load();

        var grid = new Ext.grid.GridPanel({
            el: 'grid',
            ds: ds,
            cm: cm
        });
        grid.render();

});
[/code]