Ext js tabpanel的应用
日期：2014-05-16 浏览次数：20337 次
Ext js tabpanel的使用
好久没有写博客了，今天抽点时间，将新学习的EXT技术点记录下：技术是关于Ext tabpanel的，请看代码：
<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;
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>
?实现的功能就是当点击左边的“增加Tab”菜单后会不断的增加新的tab页，再次记录，以便后用！
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
