index.jsp<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><html>
<head> <title>XX管理系统</title>
<link rel="stylesheet" type="text/css"
href="<%=request.getContextPath()%>/ext-2.2/resources/css/ext-all.css" />
<script type="text/javascript"
src="<%=request.getContextPath()%>/ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript"
src="<%=request.getContextPath()%>/ext-2.2/ext-all.js"></script> <script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'ext-2.2/docs/resources/s.gif';
</script>
</head> <body>
<div id="loading-mask" style=""></div>
<div id="loading">
<div class="loading-indicator">
</div>
<script type="text/javascript" src="js/p.js"></script>
<div id="north" align="center">
<p class="api-title">
<b>XX管理系统(north)</b>
</div>
<div id="west">
</div>
<div id="east">
</div>
<div id="south">
<div
style="float: left; margin: 5px; font: normal 12px ">
技术支持:<span style="color: blue">XX有限公司</span> (south)
</div>
<div
style="float: right; margin: 5px; font: normal 12px">
版权所有:XX管理系统
</div>
</div>
<div id="center">
</div>
</body></html>
p.jsp
//生成标签页
var tab = new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
resizeTabs:true, // turn on tab resizing
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true
});Ext.onReady(function(){
//layout
var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({
region:'north',
el: 'north',
height:80
}),new Ext.BoxComponent({
region:'south',
el: 'south',
height:25,
Save:true
}),{
region:'west',
id:'west-panel',
split:true,
width: 180,
minSize: 175,
maxSize: 400,
margins:'0 0 0 0',
layout:'accordion',
title:'栏目导航(west)',
collapsible :true,
layoutConfig:{
animate:true
},
items: [
{
title:'公文管理',
border:false,
html:'<div id="tree1" style="overflow:auto;width:100%;height:100%"></div>'
//iconCls:'nav'
},{
title:'日常办公',
border:false,
//iconCls:'settings',
html:'<div id="tree2" style="overflow:auto;width:100%;height:100%"></div>'
},{
title:'个人办公',
border:false,
//iconCls:'settings',
html:'<div id="tree2" style="overflow:auto;width:100%;height:100%"></div>'
},{
title:'外桥办公',
border:false,
//iconCls:'settings',
html:'<div id="tree3" style="overflow:auto;width:100%;height:100%"></div>'
},{
title:'系统设置',
border:false,
//iconCls:'settings',
html:'<div id="tree4" style="overflow:auto;width:100%;height:100%"></div>'
}]
},
tab//初始标签页
]
}); var root2=new Ext.tree.TreeNode({
id:"root2",
text:"树的根"
}); var c1=new Ext.tree.TreeNode({
id:'c1',
icon:'images/im2.gif',
text:'公文起草',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = tab .getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = tab.add({
'id':node.id,
'title':node.text,
closable:true, //通过html载入目标页
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://www.cqitrk.gov.cn"></iframe>'
});
}
tab.setActiveTab(n);
}
}
}); var c11=new Ext.tree.TreeNode({
id:'c11',
icon:'images/im2.gif',
text:'公文起草者',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = tab.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = tab.add({
'id':node.id,
'title':node.text,
closable:true, //通过html载入目标页
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://www.baidu.com"></iframe>'
});
}
tab.setActiveTab(n);
}
}
});
var c12=new Ext.tree.TreeNode({
id:'c12',
icon:'images/im2.gif',
text:'实例征集',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = tab.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = tab.add({
'id':node.id,
'title':node.text,
closable:true, //通过html载入目标页
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://www.baidu.com"></iframe>'
});
}
tab.setActiveTab(n);
}
}
});
var c13=new Ext.tree.TreeNode({
id:'c13',
icon:'images/im2.gif',
text:'aa',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = tab.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = tab.add({
'id':node.id,
'title':node.text,
closable:true, //通过html载入目标页
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://www.baidu.com"></iframe>'
});
}
tab.setActiveTab(n);
}
}
});
var c2=new Ext.tree.TreeNode({
id:'c2',
icon:'images/im2.gif',
text:'已发公文',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = tab.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = tab.add({
'id':node.id,
'title':node.text,
closable:true, //通过html载入目标页
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://www.baidu.com"></iframe>'
});
}
tab.setActiveTab(n);
}
} });
var c21=new Ext.tree.TreeNode({
id:'c21',
icon:'images/im2.gif',
text:'查看公文',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = tab.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = tab.add({
'id':node.id,
'title':node.text,
closable:true, //通过html载入目标页
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://www.baidu.com"></iframe>'
});
}
tab.setActiveTab(n);
}
}
});
var c22=new Ext.tree.TreeNode({
id:'c22',
icon:'images/im2.gif',
text:'拖动公文',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = tab.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = tab.add({
'id':node.id,
'title':node.text,
closable:true, //通过html载入目标页
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://www.baidu.com"></iframe>'
});
}
tab.setActiveTab(n);
}
}
});
var c23=new Ext.tree.TreeNode({
id:'c23',
icon:'images/im2.gif',
text:'日历',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = tab.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = tab.add({
'id':node.id,
'title':node.text,
closable:true, //通过html载入目标页
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="table4.jsp"></iframe>'
});
}
tab.setActiveTab(n);
}
}
});
root2.appendChild(c1);
c1.appendChild(c11);
c1.appendChild(c12);
c1.appendChild(c13);
root2.appendChild(c2);
c2.appendChild(c21);
c2.appendChild(c22);
c2.appendChild(c23); var tree2=new Ext.tree.TreePanel({
renderTo:"tree1",
root:root2, //对应 根节点
animate:true,
enableDD:false,
border:false,
rootVisible:false,
containerScroll: true
});
});
<head> <title>XX管理系统</title>
<link rel="stylesheet" type="text/css"
href="<%=request.getContextPath()%>/ext-2.2/resources/css/ext-all.css" />
<script type="text/javascript"
src="<%=request.getContextPath()%>/ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript"
src="<%=request.getContextPath()%>/ext-2.2/ext-all.js"></script> <script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'ext-2.2/docs/resources/s.gif';
</script>
</head> <body>
<div id="loading-mask" style=""></div>
<div id="loading">
<div class="loading-indicator">
</div>
<script type="text/javascript" src="js/p.js"></script>
<div id="north" align="center">
<p class="api-title">
<b>XX管理系统(north)</b>
</div>
<div id="west">
</div>
<div id="east">
</div>
<div id="south">
<div
style="float: left; margin: 5px; font: normal 12px ">
技术支持:<span style="color: blue">XX有限公司</span> (south)
</div>
<div
style="float: right; margin: 5px; font: normal 12px">
版权所有:XX管理系统
</div>
</div>
<div id="center">
</div>
</body></html>
p.jsp
//生成标签页
var tab = new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
resizeTabs:true, // turn on tab resizing
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true
});Ext.onReady(function(){
//layout
var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({
region:'north',
el: 'north',
height:80
}),new Ext.BoxComponent({
region:'south',
el: 'south',
height:25,
Save:true
}),{
region:'west',
id:'west-panel',
split:true,
width: 180,
minSize: 175,
maxSize: 400,
margins:'0 0 0 0',
layout:'accordion',
title:'栏目导航(west)',
collapsible :true,
layoutConfig:{
animate:true
},
items: [
{
title:'公文管理',
border:false,
html:'<div id="tree1" style="overflow:auto;width:100%;height:100%"></div>'
//iconCls:'nav'
},{
title:'日常办公',
border:false,
//iconCls:'settings',
html:'<div id="tree2" style="overflow:auto;width:100%;height:100%"></div>'
},{
title:'个人办公',
border:false,
//iconCls:'settings',
html:'<div id="tree2" style="overflow:auto;width:100%;height:100%"></div>'
},{
title:'外桥办公',
border:false,
//iconCls:'settings',
html:'<div id="tree3" style="overflow:auto;width:100%;height:100%"></div>'
},{
title:'系统设置',
border:false,
//iconCls:'settings',
html:'<div id="tree4" style="overflow:auto;width:100%;height:100%"></div>'
}]
},
tab//初始标签页
]
}); var root2=new Ext.tree.TreeNode({
id:"root2",
text:"树的根"
}); var c1=new Ext.tree.TreeNode({
id:'c1',
icon:'images/im2.gif',
text:'公文起草',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = tab .getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = tab.add({
'id':node.id,
'title':node.text,
closable:true, //通过html载入目标页
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://www.cqitrk.gov.cn"></iframe>'
});
}
tab.setActiveTab(n);
}
}
}); var c11=new Ext.tree.TreeNode({
id:'c11',
icon:'images/im2.gif',
text:'公文起草者',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = tab.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = tab.add({
'id':node.id,
'title':node.text,
closable:true, //通过html载入目标页
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://www.baidu.com"></iframe>'
});
}
tab.setActiveTab(n);
}
}
});
var c12=new Ext.tree.TreeNode({
id:'c12',
icon:'images/im2.gif',
text:'实例征集',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = tab.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = tab.add({
'id':node.id,
'title':node.text,
closable:true, //通过html载入目标页
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://www.baidu.com"></iframe>'
});
}
tab.setActiveTab(n);
}
}
});
var c13=new Ext.tree.TreeNode({
id:'c13',
icon:'images/im2.gif',
text:'aa',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = tab.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = tab.add({
'id':node.id,
'title':node.text,
closable:true, //通过html载入目标页
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://www.baidu.com"></iframe>'
});
}
tab.setActiveTab(n);
}
}
});
var c2=new Ext.tree.TreeNode({
id:'c2',
icon:'images/im2.gif',
text:'已发公文',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = tab.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = tab.add({
'id':node.id,
'title':node.text,
closable:true, //通过html载入目标页
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://www.baidu.com"></iframe>'
});
}
tab.setActiveTab(n);
}
} });
var c21=new Ext.tree.TreeNode({
id:'c21',
icon:'images/im2.gif',
text:'查看公文',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = tab.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = tab.add({
'id':node.id,
'title':node.text,
closable:true, //通过html载入目标页
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://www.baidu.com"></iframe>'
});
}
tab.setActiveTab(n);
}
}
});
var c22=new Ext.tree.TreeNode({
id:'c22',
icon:'images/im2.gif',
text:'拖动公文',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = tab.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = tab.add({
'id':node.id,
'title':node.text,
closable:true, //通过html载入目标页
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://www.baidu.com"></iframe>'
});
}
tab.setActiveTab(n);
}
}
});
var c23=new Ext.tree.TreeNode({
id:'c23',
icon:'images/im2.gif',
text:'日历',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = tab.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = tab.add({
'id':node.id,
'title':node.text,
closable:true, //通过html载入目标页
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="table4.jsp"></iframe>'
});
}
tab.setActiveTab(n);
}
}
});
root2.appendChild(c1);
c1.appendChild(c11);
c1.appendChild(c12);
c1.appendChild(c13);
root2.appendChild(c2);
c2.appendChild(c21);
c2.appendChild(c22);
c2.appendChild(c23); var tree2=new Ext.tree.TreePanel({
renderTo:"tree1",
root:root2, //对应 根节点
animate:true,
enableDD:false,
border:false,
rootVisible:false,
containerScroll: true
});
});
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货