Ext js tabpanel的使用
实现的功能就是当点击左边的“增加Tab”菜单后会不断的增加新的tab页，再次记录，以便后用！
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<link rel="stylesheet" type="text/css" href="css/ext-all.css">
<script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<title>Insert title here</title>
</head>
<body>
<script>
var index = 0;PHP中Array的hash函数实现
var tabPanel = new Ext.TabPanel({
region:"center",//将此tabpanel放到viewport的中间区域去
closable:true,//tab页上加上关闭图标
enableTabScroll:true,//当页面显示的tab页过多超过显示区域后，会自动出现箭头隐藏之前的tab页
items:[{title:"面板1",contentEl:"tab1",closable:true},{title:"面板2",contentEl:"tab2"}]
});
Ext.onReady(
function(){
new Ext.Viewport({
enableTabScroll:true,
layout:"border", //border布局
items:[
{title:"面板",region:"north",height:50,html:"后台管理"},
{title:"菜单",region:"west",width:200,collapsible:true,
html:"<a href='javascript:addTab()'>增加Tab</a>"},
tabPanel
]
});
}
);
function addTab(){
tabPanel.add({
title:"tab"+index,
id:"tab"+index,
html:"这里是tab"+index
});
tabPanel.setActiveTab("tab"+index);//激活新增加的tab页
index++;
}
</script>
<div id="tab1">这里是默认的tab1</div>
<div id="tab2">这里是默认的tab2</div>
</body>
