类似QQ的布局
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<%@include file="jsp/common.jsp"%>
<script type="text/javascript">
Ext.onReady(function(){
var item1 = new Ext.Panel({
title:'新闻管理',
cls:'empty',
items:[
new Ext.Button({
id:'test_according1',
text:'测试管理',
width:'100%',
align:"center",
listeners:{
click: function(btn, event) {
//alert("sad");
var n;
n = contentPanel.getComponent(btn.id);
if(n) {
contentPanel.setActiveTab(n);
return;
}
n = contentPanel.add({
id : btn.id,
title : btn.id,
//html : '<iframe width=100% height=100% src=' + btn.id + ' />',
html:"测试管理",
//autoLoad:'test2.html',
closable : 'true'
});
contentPanel.setActiveTab(n);
}
}
})]
});
var item2 = new Ext.Panel({
title:'专题管理',
cls:'empty',
items:[
new Ext.Button({
id:'test_according2',
text:'测试管理',
width:'100%',
listeners:{
click: function(btn, event) {
//alert("sad");
var n;
n = contentPanel.getComponent(btn.id);
if(n) {
contentPanel.setActiveTab(n);
return;
}
n = contentPanel.add({
id : btn.id,
title : btn.id,
html : '专题管理',
//autoLoad:'test2.html',
closable : 'true'
});
contentPanel.setActiveTab(n);
}
}
})]
});
var item3= new Ext.Panel({
title:'案例管理',
cls:'empty',
items:[
new Ext.Button({
id:'test_according3',
text:'测试管理',
width:'100%',
listeners:{
click: function(btn, event) {
//alert("sad");
var n;
n = contentPanel.getComponent(btn.id);
if(n) {
contentPanel.setActiveTab(n);
return;
}
n = contentPanel.add({
id : btn.id,
title : btn.id,
html : '测试管理',
//autoLoad:'test2.html',
closable : 'true'
});
contentPanel.setActiveTab(n);
}
}
})]
});
var item4 = new Ext.Panel({
title:'留言管理',
cls:'empty',
items:[
new Ext.Button({
id:'test_according4',
text:'测试管理',
width:'100%',
listeners:{
click: function(btn, event) {
//alert("sad");
var n;
n = contentPanel.getComponent(btn.id);
if(n) {
contentPanel.setActiveTab(n);
return;
}
n = contentPanel.add({
id : btn.id,
title : btn.id,
html : '留言管理',
//autoLoad:'test2.html',
closable : 'true'
});
contentPanel.setActiveTab(n);
}
}
})]
});
var item5 = new Ext.Panel({
title:'品牌管理',
cls:'empty',
items:[
new Ext.Button({
id:'test_according5',
text:'测试管理',
width:'100%',
listeners:{
click: function(btn, event) {
//alert("sad");
var n;
n = contentPanel.getComponent(btn.id);
if(n) {
contentPanel.setActiveTab(n);
return;
}
n = contentPanel.add({
id : btn.id,
title : btn.id,
html : '品牌管理',
//autoLoad:'test2.html',
closable : 'true'
});
contentPanel.setActiveTab(n);
}
}
})]
});
var item6 = new Ext.Panel({
title:'业务管理',
items:[
new Ext.Button({
id:'test_according6',
text:'测试管理',
width:'100%',
listeners:{
click: function(btn, event) {
//alert("sad");
var n;
n = contentPanel.getComponent(btn.id);
if(n) {
contentPanel.setActiveTab(n);
return;
}
n = contentPanel.add({
id : btn.id,
title : btn.id,
html : '测试管理',
//autoLoad:'project.jsp',
closable : 'true'
});
contentPanel.setActiveTab(n);
}
}
})]
});
//树的根节点合同管理
var root1=new Ext.tree.TreeNode({
id:'root1',
text:'合同管理',
draggable:false,
//expanded:true,
visable:false
})
//暂时没用
var root2=new Ext.tree.TreeNode({
id:'root2',
text:'帮助',
draggable:false,
expanded:true
})
var menuTree = new Ext.tree.TreePanel({
region:'west',
title:'合同管理',
width:180,
minSize:150,
maxSize:200,
split:true,
autoScroll:true,
autoHeight:false,
collapsible:true,
root: root1,
rootVisable:false//不显示根节点
});
//root2增加子结点
root1.appendChild(new Ext.tree.TreeNode({
id:'htmlPanel1',
text:'客户',
listeners:{
'click':function(node, event) {
event.stopEvent();
//TabPanel
var n = contentPanel.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = contentPanel.add({
'id':node.id,
'title':node.text,
closable:true, //通过html载入目标页
//html:'客户信息'
//autoLoad:{url:"iusepm/system/customer/jsp/customerManager.jsp",scripts:true}
autoLoad:{url:"iusepm/system/customer/jsp/addCustomer.jsp",scripts:true}
});
}
//设置为活动
contentPanel.setActiveTab(n);
}
}
}));
/////////左侧导航目录
var arrPanle=new Ext.Panel({
renderTo:"hello",
title:"系统管理gdsg",
width:200,
height:200,
layout:"accordion",
region:'west',
layoutConfig: {
animate: true
},
items:[item1,item2,item3,item4,item5,item6,menuTree]
});
//////////上侧内容/////
var northPanle=new Ext.Panel({
title:"系统管理",
width:50,
height:83,
autoLoad:{url:"images/customer/pic.html",scripts:true},
region:'north'
});
//右边具体功能面板区
var contentPanel = new Ext.TabPanel({
region:'center',
enableTabScroll:true,
activeTab:0,
items:[{
id:'homePage',
title:'首页',
autoScroll:true,
html:'欢迎进入首页'
}]
});
//视图
new Ext.Viewport({
layout:'border', //使用border布局
defaults:{activeItem:0},
//items:[ contentPanel,northPanle,arrPanle]
items:[ contentPanel,arrPanle]
});
});
</script>
</head>
<body>
<div id="hello"></div>
</body>
</html>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<%@include file="jsp/common.jsp"%>
<script type="text/javascript">
Ext.onReady(function(){
var item1 = new Ext.Panel({
title:'新闻管理',
cls:'empty',
items:[
new Ext.Button({
id:'test_according1',
text:'测试管理',
width:'100%',
align:"center",
listeners:{
click: function(btn, event) {
//alert("sad");
var n;
n = contentPanel.getComponent(btn.id);
if(n) {
contentPanel.setActiveTab(n);
return;
}
n = contentPanel.add({
id : btn.id,
title : btn.id,
//html : '<iframe width=100% height=100% src=' + btn.id + ' />',
html:"测试管理",
//autoLoad:'test2.html',
closable : 'true'
});
contentPanel.setActiveTab(n);
}
}
})]
});
var item2 = new Ext.Panel({
title:'专题管理',
cls:'empty',
items:[
new Ext.Button({
id:'test_according2',
text:'测试管理',
width:'100%',
listeners:{
click: function(btn, event) {
//alert("sad");
var n;
n = contentPanel.getComponent(btn.id);
if(n) {
contentPanel.setActiveTab(n);
return;
}
n = contentPanel.add({
id : btn.id,
title : btn.id,
html : '专题管理',
//autoLoad:'test2.html',
closable : 'true'
});
contentPanel.setActiveTab(n);
}
}
})]
});
var item3= new Ext.Panel({
title:'案例管理',
cls:'empty',
items:[
new Ext.Button({
id:'test_according3',
text:'测试管理',
width:'100%',
listeners:{
click: function(btn, event) {
//alert("sad");
var n;
n = contentPanel.getComponent(btn.id);
if(n) {
contentPanel.setActiveTab(n);
return;
}
n = contentPanel.add({
id : btn.id,
title : btn.id,
html : '测试管理',
//autoLoad:'test2.html',
closable : 'true'
});
contentPanel.setActiveTab(n);
}
}
})]
});
var item4 = new Ext.Panel({
title:'留言管理',
cls:'empty',
items:[
new Ext.Button({
id:'test_according4',
text:'测试管理',
width:'100%',
listeners:{
click: function(btn, event) {
//alert("sad");
var n;
n = contentPanel.getComponent(btn.id);
if(n) {
contentPanel.setActiveTab(n);
return;
}
n = contentPanel.add({
id : btn.id,
title : btn.id,
html : '留言管理',
//autoLoad:'test2.html',
closable : 'true'
});
contentPanel.setActiveTab(n);
}
}
})]
});
var item5 = new Ext.Panel({
title:'品牌管理',
cls:'empty',
items:[
new Ext.Button({
id:'test_according5',
text:'测试管理',
width:'100%',
listeners:{
click: function(btn, event) {
//alert("sad");
var n;
n = contentPanel.getComponent(btn.id);
if(n) {
contentPanel.setActiveTab(n);
return;
}
n = contentPanel.add({
id : btn.id,
title : btn.id,
html : '品牌管理',
//autoLoad:'test2.html',
closable : 'true'
});
contentPanel.setActiveTab(n);
}
}
})]
});
var item6 = new Ext.Panel({
title:'业务管理',
items:[
new Ext.Button({
id:'test_according6',
text:'测试管理',
width:'100%',
listeners:{
click: function(btn, event) {
//alert("sad");
var n;
n = contentPanel.getComponent(btn.id);
if(n) {
contentPanel.setActiveTab(n);
return;
}
n = contentPanel.add({
id : btn.id,
title : btn.id,
html : '测试管理',
//autoLoad:'project.jsp',
closable : 'true'
});
contentPanel.setActiveTab(n);
}
}
})]
});
//树的根节点合同管理
var root1=new Ext.tree.TreeNode({
id:'root1',
text:'合同管理',
draggable:false,
//expanded:true,
visable:false
})
//暂时没用
var root2=new Ext.tree.TreeNode({
id:'root2',
text:'帮助',
draggable:false,
expanded:true
})
var menuTree = new Ext.tree.TreePanel({
region:'west',
title:'合同管理',
width:180,
minSize:150,
maxSize:200,
split:true,
autoScroll:true,
autoHeight:false,
collapsible:true,
root: root1,
rootVisable:false//不显示根节点
});
//root2增加子结点
root1.appendChild(new Ext.tree.TreeNode({
id:'htmlPanel1',
text:'客户',
listeners:{
'click':function(node, event) {
event.stopEvent();
//TabPanel
var n = contentPanel.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = contentPanel.add({
'id':node.id,
'title':node.text,
closable:true, //通过html载入目标页
//html:'客户信息'
//autoLoad:{url:"iusepm/system/customer/jsp/customerManager.jsp",scripts:true}
autoLoad:{url:"iusepm/system/customer/jsp/addCustomer.jsp",scripts:true}
});
}
//设置为活动
contentPanel.setActiveTab(n);
}
}
}));
/////////左侧导航目录
var arrPanle=new Ext.Panel({
renderTo:"hello",
title:"系统管理gdsg",
width:200,
height:200,
layout:"accordion",
region:'west',
layoutConfig: {
animate: true
},
items:[item1,item2,item3,item4,item5,item6,menuTree]
});
//////////上侧内容/////
var northPanle=new Ext.Panel({
title:"系统管理",
width:50,
height:83,
autoLoad:{url:"images/customer/pic.html",scripts:true},
region:'north'
});
//右边具体功能面板区
var contentPanel = new Ext.TabPanel({
region:'center',
enableTabScroll:true,
activeTab:0,
items:[{
id:'homePage',
title:'首页',
autoScroll:true,
html:'欢迎进入首页'
}]
});
//视图
new Ext.Viewport({
layout:'border', //使用border布局
defaults:{activeItem:0},
//items:[ contentPanel,northPanle,arrPanle]
items:[ contentPanel,arrPanle]
});
});
</script>
</head>
<body>
<div id="hello"></div>
</body>
</html>