<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>后台管理系统</title>
<meta name="keywords" content="电子商务">
<meta name="description" content="CRM后台管理系统">
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/ext/resources/css/ext-all.css">
</head>
<body>
<center><div id="tabs" style="margin:15px 0;">初始化中....</div></center>
<script src="<%=request.getContextPath()%>/ext/js/ext-base.js" type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/ext/js/ext-all-debug.js" type="text/javascript"></script>
<script language="javascript">
Ext.onReady(function(){
//创建树跟菜单,并动态地加载子节点
var root= new Ext.tree.AsyncTreeNode({
expanded: false,
loader: new Ext.tree.TreeLoader({
dataUrl:"/temp/springMVCtest.do?method=getTreeNodeByJson",
requestMethod:"post"
}),
children: [{
text: '用户管理'
}]
});
//浏览器可视区域,将ext组件放置其中,当窗体大小变化时,ext组件同时发生变化
var viewport=new Ext.Viewport({
layout: 'border',//视图布局方式
items: [{
//放置组件项目
region: 'west',
collapsible: true,
title: '主菜单',
xtype: 'treepanel',//树形结构的panel组件
width: 200,
autoScroll: true,
split: true,
root: root,
rootVisible: false,
listeners: {
//菜单点击时的事件处理
click: function(n) { addTabs(n); }
}
}, {
region: 'center',
xtype: 'tabpanel', //放置tab组件队列的panel
id:'tabpanel',
resizeTabs:true,
minTabWidth: 135,
tabWidth:135,
enableTabScroll:true,
width:600,
height:250,
defaults: {autoScroll:true},
items: [{
//tab组件项目
title: '首页',
id: 'hometab',
html: '欢迎使用本系统'
}
]
}]
});
//处理treeNode的单击事件
function addTabs(node){
if(node.attributes.leaf!=true){
}
else{
if(Ext.getCmp(node.attributes.text)!=null){
Ext.getCmp(node.attributes.text).show();
}
else{
//根据菜单栏的id来请求页面,并在tabpanel中显示
var url="/temp/springMVCtest.do?method=getPageItem&pageid=" +node.attributes.id;
var html="<iframe src="+url+" frameborder=\"0\" width=\"100%\" height=\"100%\" >";
Ext.getCmp("tabpanel").add({
title: node.attributes.text,
iconCls: 'tabs',
id: node.attributes.text,
html: html,
scripts: true,
closable:true
}).show();
}
}
}
//初始化完成后,tabpanel中默认tab页面显示
Ext.getCmp("hometab").show();
});
</script>
</body>
</html>
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>后台管理系统</title>
<meta name="keywords" content="电子商务">
<meta name="description" content="CRM后台管理系统">
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/ext/resources/css/ext-all.css">
</head>
<body>
<center><div id="tabs" style="margin:15px 0;">初始化中....</div></center>
<script src="<%=request.getContextPath()%>/ext/js/ext-base.js" type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/ext/js/ext-all-debug.js" type="text/javascript"></script>
<script language="javascript">
Ext.onReady(function(){
//创建树跟菜单,并动态地加载子节点
var root= new Ext.tree.AsyncTreeNode({
expanded: false,
loader: new Ext.tree.TreeLoader({
dataUrl:"/temp/springMVCtest.do?method=getTreeNodeByJson",
requestMethod:"post"
}),
children: [{
text: '用户管理'
}]
});
//浏览器可视区域,将ext组件放置其中,当窗体大小变化时,ext组件同时发生变化
var viewport=new Ext.Viewport({
layout: 'border',//视图布局方式
items: [{
//放置组件项目
region: 'west',
collapsible: true,
title: '主菜单',
xtype: 'treepanel',//树形结构的panel组件
width: 200,
autoScroll: true,
split: true,
root: root,
rootVisible: false,
listeners: {
//菜单点击时的事件处理
click: function(n) { addTabs(n); }
}
}, {
region: 'center',
xtype: 'tabpanel', //放置tab组件队列的panel
id:'tabpanel',
resizeTabs:true,
minTabWidth: 135,
tabWidth:135,
enableTabScroll:true,
width:600,
height:250,
defaults: {autoScroll:true},
items: [{
//tab组件项目
title: '首页',
id: 'hometab',
html: '欢迎使用本系统'
}
]
}]
});
//处理treeNode的单击事件
function addTabs(node){
if(node.attributes.leaf!=true){
}
else{
if(Ext.getCmp(node.attributes.text)!=null){
Ext.getCmp(node.attributes.text).show();
}
else{
//根据菜单栏的id来请求页面,并在tabpanel中显示
var url="/temp/springMVCtest.do?method=getPageItem&pageid=" +node.attributes.id;
var html="<iframe src="+url+" frameborder=\"0\" width=\"100%\" height=\"100%\" >";
Ext.getCmp("tabpanel").add({
title: node.attributes.text,
iconCls: 'tabs',
id: node.attributes.text,
html: html,
scripts: true,
closable:true
}).show();
}
}
}
//初始化完成后,tabpanel中默认tab页面显示
Ext.getCmp("hometab").show();
});
</script>
</body>
</html>