一个简单的Extjs 做的后台框架(Accordion+TabPanel)
<html>
<head>
<title>Accordion Layout</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="tabs-example.css" />
<script type="text/javascript" src="tabs-example.js"></script>
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<script type="text/javascript">var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript">try{var pageTracker = _gat._getTracker("UA-1396058-1");pageTracker._initData();pageTracker._trackPageview();} catch(err) {}</script>
<!-- LIBS -->
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../ext-all.js"></script>
<style type="text/css">
html, body {
font: normal 12px verdana;
margin: 0;
padding: 0;
border: 0 none;
overflow: hidden;
height: 100%;
}
.empty .x-panel-body {
padding-top:20px;
text-align:center;
font-style:italic;
color: gray;
font-size:11px;
}
</style>
<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%',
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 + ' />',
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 : '<iframe width=100% height=100% src=' + btn.id + ' />',
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 : '<iframe width=100% height=100% src=' + btn.id + ' />',
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 : '<iframe width=100% height=100% src=' + btn.id + ' />',
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 : '<iframe width=100% height=100% src=' + btn.id + ' />',
autoLoad:'test2.html',
closable : 'true'
});
contentPanel.setActiveTab(n);
}
}
})]
});
var item6 = new Ext.Panel({
title:'业务管理',
cls:'empty',
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 : '<iframe width=100% height=100% src=' + btn.id + ' />',
autoLoad:'test2.html',
closable : 'true'
});
contentPanel.setActiveTab(n);
}
}
})]
});
var accordion = new Ext.Panel({//方法的调用 : 先初始化一个Panel
region:'west',
margins:'0 0 0 5',
split:true,
width: 200,
layout:'accordion',
items: [item1, item2, item3, item4, item5,item6]
});
var contentPanel = new Ext.TabPanel({
region:'center',
enableTabScroll:true,
activeTab:0,
items:[{
closable:true,
title:'test tab',
autoLoad:'test1.html'
}]
});
new Ext.Viewport({//viewport在面板上呈现应用程序 --- 这是基本
layout:'border',
items:[accordion,contentPanel]
});
});
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
</body>
</html>