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

});