ext 初学者提问。。。。。。

<html>
<head>
<title>ext1.html</title>
<link rel="stylesheet" type="text/css"
href="../ext/resources/css/ext-all.css">
<script type="text/javascript" src="../ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<script type="text/javascript"> 
Ext.onReady(function() {  
Ext.MessageBox.alert(1);
var mainLayout = new Ext.BorderLayout(document.body, 
{north: { split: true, initialSize: 50  },
    south: {split: true, initialSize: 50  },
    east: { split: true, initialSize: 100  }, 
    west: { split: true, initialSize: 100  },  
    center: {}}); 
Ext.MessageBox.alert(2);
 mainLayout.beginUpdate();
mainLayout.add('north', new Ext.ContentPanel('north-div', {
    fitToFrame: true, closable: false
}));
mainLayout.add('south', new Ext.ContentPanel('south-div', {
    fitToFrame: true, closable: false 
}));
mainLayout.add('east', new Ext.ContentPanel('east-div', {
    fitToFrame: true, closable: false
}));
mainLayout.add('west', new Ext.ContentPanel('west-div', {
    fitToFrame: true, closable: false
}));
mainLayout.add('center', new Ext.ContentPanel('center-div', {
    fitToFrame: true
}));
mainLayout.endUpdate(); 
Ext.MessageBox.alert(3); 
 });   
</script>
</head> <body>
<div id="north-div"> north</div>
<div id="south-div">south </div>
<div id="east-div"> east</div>
<div id="west-div">west </div>
<div id="center-div">center</div>
</body>
</html>
为什么这代码没反应呢????????????
能够输出一，但不能输出二。。为什么呢。请教下