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()
});
});
<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()
});
});