Ext JS结合JSp复杂嵌套布局


要实现上述的布局效果。在左侧选择题型，在右侧可以编辑该题的具体内容：题目、选项等。并且选择不同的题型会根据具体情况改变编辑内容。每编辑完成一个题目就可以在问卷内容里显示。
我的Ext布局如下：
<link rel="stylesheet" type="text/css" href="CSS/ext-all.css" />
<link rel="stylesheet" type="text/css" href="CSS/left.css" /><style type="text/css">
p {
margin: 5px;
}.settings {
background-image: url(Img/folder_wrench.png);
}.nav {
background-image: url(Img/folder_go.png);
}.info {
background-image: url(Img/information.png);
}
</style>
<script type="text/javascript" src="JS/ext-all.js"></script>
<script type="text/javascript">
Ext.require([ '*' ]);
Ext.onReady(function() {//onReady()函数在页面注册多个函数，依次执行
     Ext.QuickTips.init();
 Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
var viewport = Ext.create('Ext.Viewport',
{
       id : 'border-example',
   layout : 'border',
   autoScroll : true,
items : [
// create instance immediately
Ext.create('Ext.Component',{
region : 'north',
        height : 32, // give north and south regions a height
  autoEl : {
tag : 'div',
     
   }
}),
{
// lazily created panel (xtype:'panel' is default)
region : 'south',
contentEl : 'south',
//split: true,
height : 50,
// minSize: 100,
//maxSize: 200,
//collapsible: true,//子区域的展开和折叠
//collapsed: true,
// title: 'South',
margins : '0 0 0 0'
},
{
xtype : 'tabpanel',
region : 'east',
title : 'East Side',
dockedItems : [ {
dock : 'top',
xtype : 'toolbar',
items : [ '->', {
xtype : 'button',
text : 'test',
tooltip : 'Test Button'
} ]
} ],
animCollapse : true,
collapsible : true,
split : true,
width : 225, // give east and west regions a width
minSize : 175,
maxSize : 400,
margins : '0 5 0 0',
activeTab : 1,
tabPosition : 'bottom',
items : [
{
html : '<p>A TabPanel component can be a region.</p>',
title : 'A Tab',
autoScroll : true
},
Ext
.create(
'Ext.grid.PropertyGrid',
{
title : 'Property Grid',
closable : false,
source : {
"(name)" : "Properties Grid",
"grouping" : false,
"autoFitColumns" : true,
"productionQuality" : false,
"created" : Ext.Date
.parse(
'10/15/2006',
'm/d/Y'),
"tested" : false,
"version" : 0.01,
"borderWidth" : 1
}
}) ]
}, {
region : 'west',
stateId : 'navigation-panel',
id : 'west-panel', // see Ext.getCmp() below
title : '请选择题型',
split : true,
width : 100,
minWidth : 100,
maxWidth : 200,
collapsible : true,
animCollapse : true,
margins : '0 0 0 5',
layout : 'accordion',//伸缩菜单
items : [ {
contentEl : 'west',
title : '基本题型',
iconCls : ''// see the HEAD section for style used }, {
title : '扩展题型',
// html: '<button type="button">Click Me!</button>',
iconCls : ''
}, {
title : '高级题型',
//html: '<p>Some info in here.</p>',
iconCls : ''
} ]
},

{
region : 'center', // a center region is ALWAYS required for border layout
//deferredRender: false,
//activeTab: 0,     // first tab initially active
split : true,
border : true,
layout : 'border',
items : [ {
region : 'west',
title : '题目详细设计',
border : true,
split : true,
width : 500,
minWidth : 175,
maxWidth : 500,
collapsible : true,
animCollapse : true,
margins : '0 0 0 5',
layout : 'fit',
autoScroll : true,
contentEl : 'center-left'
//items : [ form ]
}, { region : 'center',
split : true,
title : '问卷内容',
html : 'center'
} ]
} ]
});

Ext.get("hideit").on('click', function() {

var w = Ext.getCmp('west-panel');

w.collapsed ? w.expand() : w.collapse();
});
});
</script>
</head><body>
<!-- use class="x-hide-display" to prevent a brief flicker of the content -->
<div id="west">
<ul class="MM">
<li><a href="SelectAdminServlet" target="rightFrame">单项选择</a></li>
<li><a href="Admin/AddAdmin.jsp" target="rightFrame">多项选择</a></li>
<li><a href="Admin/AddAdmin.jsp" target="rightFrame">填空</a></li>
<li><a href="Admin/AddAdmin.jsp" target="rightFrame">单项选择+输入</a>
</li>
<li><a href="Admin/AddAdmin.jsp" target="rightFrame">多项选择+输入</a>
</li>
</ul>
</div>
<div id="center-left">
<iframe height="100%" width="100%" frameborder="0"
src="/DesignQuestions/Center-left.jsp" name="leftFrame"
id="leftFrame" title="leftFrame"> </iframe>
</div>
<div id="center2" class="x-hide-display">
<a id="hideit" href="#">Toggle the west region</a>
</div> <div id="center1" class="x-hide-display">
<p>
<b>Done reading me? Close me by clicking the X in the top right
corner.</b>
</p>
</div>
<div id="props-panel" class="x-hide-display"
style="width:200px;height:200px;overflow:hidden;"></div>
<div id="south" class="x-hide-display">
<p>south - generally for informational stuff, also could be for
status bar</p>
</div>
</body>
</html>
还有，在<iframe height="100%" width="100%" frameborder="0"
src="/DesignQuestions/Center-left.jsp" name="leftFrame"
id="leftFrame" title="leftFrame"> </iframe>不知iframe用的对不对。
就是无法显示出来，错误代码404，但是路径没错啊？说了这么多，可能大侠们都有点晕，就是一句话，实现上述图片的界面并且结合Ext和JSP。哪位大侠指点一下？Ext 布局ExtJS