<%@ 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>
類似QQ的佈局
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.