extjs之-总体框架的布局-优快云博客

jsp 页面如下：
<html>
<head>
<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/xtheme.css" />
<link rel="stylesheet" type="text/css" href="lib/unimas/css/ext-unimas.css" />
<link rel="stylesheet" type="text/css" href="css/ext-index.css" />
</head>
<body>
<script type="text/javascript" src="lib/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="lib/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="lib/ext/ext-lang-zh_CN.js" charset="utf-8"></script>
<script type="text/javascript" src="lib/unimas/CustomXmlTreeLoader.js"></script>
<div id="north" ><div class="h_title">UI-Ⅱ System</div></div>
<div id="center">
<iframe scrolling="auto" frameborder="0" id="center_iframe" style="border:0px none; height:100%; width:100%;"></iframe>
</div>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
js内容如下：

Ext.onReady(function (){

//左边的树,生成树的对象

var tree = new Ext.tree.TreePanel({
region:'center',
title:'树菜单',
containerScroll:true,
loader: new Ext.ux.CustomXmlTreeLoader({
dataUrl:'tree.xml'
}),
root: new Ext.tree.AsyncTreeNode(),
enableDD:true,
dropConfig:{
appendOnly:true
},
listeners:{
'click':function(node){
Ext.get('center_iframe').dom.src = node.attributes.hrefsrc;
}
}
});

//主内容
var main = new Ext.Panel({
region:'center',
contentEl: 'center',//指定内容区域为 id为center的div
title:'内容',
html:'neirong',
margins: Ext.isIE?'5 5 5 0':'10 5 5 0'

});
//建立一个viewport

v = new Ext.Viewport({

layout:'border',

items: [{

//xtype: 'box',

region: 'north',

contentEl: 'north',

height: 36

},{

layout: 'border',

region:'west',

border: false,

split:true,
margins: Ext.isIE?'5 0 5 5':'5 0 5 5',
width: 275,

minSize: 100,

maxSize: 500,

items: [tree]

},

main

],

renderTo: Ext.getBody()

});

});