Ext问题——A is undefined

小弟正处于学习Ext阶段，今天遇到了一个问题，望各位大哥帮忙解决。
这是小弟写的一个简单的js：
Ext.onReady(function(){
Ext.QuickTips.init();
//左边的面板
var westPanel = new Ext.Panel({
region:"west",
title:"左边的面板",
layout:"accordion",
width:200,
minSize: 150,
maxSize: 500,
collapsible:true,
animate:true,
items:[westChildPanel1,westChildPanel2]
});

    //左边的面板中的第一个面板
var westChildPanel1 = new Ext.Panel({
    title:"Ext核心API详解",
    width:200
});

//左边的面板中的第二个面板
var westChildPanel2 = new Ext.Panel({
    title:"功能菜单",
    width:200

});

//中间的面板
var mainPanel = new Ext.tabPanel({
    region:"center",
    title:"centerPanel"
});

//北边的面板
var northPanel = new Ext.Panel({
    region:"north",
    contentEl:"header"
});

//主视图
var mainView = new Ext.Viewport({
    layout:"border",
    items:[northPanel,westPanel,mainPanel]
});
mainView.doLayout();
Ext.get('loading').remove();
Ext.get('loading-mask').fadeOut({remove:true});

});

html代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


main.html
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link rel="stylesheet" type="text/css" href="./resources/css/ext-all.css">
<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>




这里放顶部菜单栏





加载中，请稍等...



为什么运行的时候在Firebug给我提示：
A is undefined
http://localhost:8080/ExtPractice/ext-all.js
Line 64

只改Ext.tabPanel 改为 Ext.TabPanel还是会有A is undefined错误的..
[code="java"]var westPanel = new Ext.Panel({
...
});

//左边的面板中的第一个面板
var westChildPanel1 = new Ext.Panel({
...
});

//左边的面板中的第二个面板
var westChildPanel2 = new Ext.Panel({
...
}); [/code]
有错误吧..,
我是把westPanel放到westChildPanel1 ,westChildPanel2 后面
下面是我电脑上测试没问题的代码..extjs路径改你的就行了..
[code="java"]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


main.html
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8">





<br> Ext.onReady(function(){ <br> Ext.QuickTips.init(); </p> <p>//左边的面板中的第一个面板 <br> var westChildPanel1 = new Ext.Panel({ <br> title:&quot;Ext核心API详解&quot;, <br> width:200 <br> }); </p> <p>//左边的面板中的第二个面板 <br> var westChildPanel2 = new Ext.Panel({ <br> title:&quot;功能菜单&quot;, <br> width:200 </p> <p>}); <br> //左边的面板 <br> var westPanel = new Ext.Panel({ <br> region:&quot;west&quot;, <br> title:&quot;左边的面板&quot;, <br> layout:&quot;accordion&quot;, <br> width:200, <br> minSize: 150, <br> maxSize: 500, <br> collapsible:true, <br> animate:true, <br> items:[westChildPanel1,westChildPanel2] <br> }); <br> //中间的面板 <br> var mainPanel = new Ext.TabPanel({ <br> region:&quot;center&quot;, <br> title:&quot;centerPanel&quot; ,<br> renderTo:&quot;main&quot;<br> }); </p> <p>//北边的面板 <br> var northPanel = new Ext.Panel({ <br> region:&quot;north&quot;, <br> contentEl:&quot;header&quot; <br> }); </p> <p>//主视图 <br> var mainView = new Ext.Viewport({ <br> layout:&quot;border&quot;, <br> items:[northPanel,westPanel,mainPanel] <br> }); <br> mainView.doLayout(); <br> Ext.get(&#39;loading&#39;).remove(); <br> Ext.get(&#39;loading-mask&#39;).fadeOut({remove:true}); </p> <p>}); </p> <p>



这里放顶部菜单栏


加载中，请稍等...



[/code]

Ext.tabPanel 改为 Ext.TabPanel

楼上正解:)我就不再测试了