`

ext--tablepanel

    博客分类:
  • Ext
ext 
阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>tabpanel.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
	<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="../ext/ext-all.js"></script>
	<script type="text/javascript">
		Ext.onReady(function(){
			var tabPanel = new Ext.TabPanel(
				{
				activeTab:0,//激活的Tab
				width:document.body.clientWidth,
				height:document.body.clientHeight,
				closable : true,
				autoDestroy:true,
				items:[
					{title:"标签1",html:"<b>标签1</b>",bodyStyle:"padding:10px"},//内容是写死的。
					{title:"标签2",autoLoad:{url:"../index.jsp"}},//加载一个页面
					{title:"标签3",contentEl:"div1"},
					{title:"标签4",html:"<b>标签4</b>"},
					{title:"标签5",html:"<b>标签5</b>"}
				],
				renderTo:"tab",
				defaults:{autoScroll:true},
				enableTabScroll:true,//内容超过了出现滚动条
				border:true,//边框。
				frame:true
				}
			);
			
			Ext.get("btn1").on("click",function(){
				var activeTab = tabPanel.getActiveTab();
				tabPanel.items.each(function(item){
					alert(item);
					if (item.closable && item != activeTab){
						tabPanel.remove(item);
					}
				});
			});
			
			Ext.get("btn2").on("click",function(){
				tabPanel.items.each(function(item){
					if (item.closable){
						tabPanel.remove(item);
					}
				});
			});
			var i = 6;
			//  添加标签
			Ext.get("btn3").on("click",function(){
				var tabpanel = new Ext.TabPanel(
					{
						title:"TabPanel" + i,
						html:"TabPanel" + i
					}
				);
				tabPanel.add(tabpanel); // 添加标签
				tabPanel.setActiveTab(tabpanel); // 激活
				i++;
			});
			
			//  删除标签
			Ext.get("btn4").on("click",function(){
				var currentTab = tabPanel.getActiveTab();
				tabPanel.remove(currentTab); // 删除标签
			});
		});
	</script>
  </head>
  
  <body>
    	<div id="tab"></div>
    	<br>
    	<input type="button" id="btn1" value="删除所有非活动标签">
    	<input type="button" id="btn2" value="删除所有标签">
    	<input type="button" id="btn3" value="添加标签">
    	<input type="button" id="btn4" value="删除标签">
  </body>
</html>



分享到:
评论

相关推荐

    ext-2.0 ext-2.0 ext-2.0 ext-2.0 ext-2.0

    ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0

    spketdwcs-ext-2.1.mxp

    spketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-...

    前端开源库-style-ext-html-webpack-plugin

    其中,“style-ext-html-webpack-plugin”是一个特别值得关注的插件,它专门针对HTML文件的内联样式进行了优化,以提高页面加载速度和用户体验。 **一、插件概述** “style-ext-html-webpack-plugin”是针对...

    ext-lang-en.js和ext-lang-zh_CN.js

    Extjs中实现国际化要用到的文件ext-lang-zh_CN.js和ext-lang-en.js

    ext-ms-win-gdi-desktop-l1-1-0.dll

    ext-ms-win-gdi-desktop-l1-1-0.dll 用于解决这个dll文件丢失问题,下载后将此文件放置在相关文件根目录下,即可解决丢失问题

    bcprov-ext-jdk15on-152和bcprov-jdk15on-152

    标题中的"bcprov-ext-jdk15on-152"和"bcprov-jdk15on-152"是两个与Bouncy Castle库相关的Java档案文件,它们主要用于提供加密和安全服务。Bouncy Castle是一个开源的Java安全提供者,广泛用于密码学应用,包括加密、...

    bcprov-ext-jdk15on-1.54.jar,bcprov-jdk15on-1.54.jar

    为了解决这个问题,我们可以引入Bouncy Castle提供的jar包:bcprov-ext-jdk15on-1.54.jar和bcprov-jdk15on-1.54.jar。 Bouncy Castle是一个开源的Java加密库,它提供了丰富的加密算法和协议实现,包括对称加密、非...

    bcprov-ext-jdk15on-1.54.jar和bcprov-jdk15on-1.54.jar压缩文件

    《深入解析bcprov-jdk15on与bcprov-ext-jdk15on:Java加密库的秘密武器》 在Java开发中,加密技术是至关重要的,它保障了数据的安全传输和存储。bcprov-jdk15on和bcprov-ext-jdk15on是Bouncy Castle项目提供的两个...

    bcprov-ext-jdk16-1.45.jar

    bcprov-ext-jdk16-1.45.jar资源包 ,在进行JAVA的ECC椭圆算法调用时,需要用到的jar包

    ext 2 简单例子(内附ext-all.css, ext-base.js, ext-all.js三个必不可少的文件)

    ext 是 ExtJs 的简称,是一个强大的js 类库。本资源主要包括三个大的文件ext-all.css,ext-base.js,ext-al.js。在引用ext 类库的时候,这三个文件必不可少。另外我还提供了ext2的一个简单例子,以便大家学习交流。

    bcprov-ext-jdk15on-160.jar

    1.下载 bcprov-ext-jdk15on-160.jar,复制到jdk_home\jre\lib\ext 2.配置bcprov,在 jdk_home\jre\lib\security\目录中找到 java.security 在内容增加一行 security.provider.11=org.bouncycastle.jce.provider....

    ext-7.0.0-gpl.zip

    标题中的"ext-7.0.0-gpl.zip"是一个软件扩展或库的压缩包,遵循GPL(GNU General Public License)开源协议。这通常意味着它是一个免费的、可修改的软件,用户可以查看源代码并根据需要进行定制,但必须保留原始许可...

    Ext-Gantt和相关js如ext-all.js ext-base

    Ext-Gantt是一款强大的JavaScript库,专门用于在Web应用程序中创建和展示甘特图。它基于Ext JS框架,一个广泛使用的富客户端JavaScript库,提供了一系列组件和功能,用于构建交互式的用户界面。Ext JS的核心文件包括...

    bcprov-ext-jdk15on-1.52.jar和bcprov-jdk15on-1.52.jar

    标题中的"bcprov-ext-jdk15on-1.52.jar"和"bcprov-jdk15on-1.52.jar"是两个与Java相关的库文件,它们都属于Bouncy Castle加密库的不同版本。Bouncy Castle是一个开源的Java安全套件,提供广泛的安全服务,包括加密、...

    bcprov-ext-jdk15on-1.52和bcprov-jdk15on-1.52

    标题中的"bcprov-ext-jdk15on-1.52"和"bcprov-jdk15on-1.52"是两个不同版本的Java软件包,它们都是由The Legion of the Bouncy Castle(Bouncy Castle)组织提供的加密库。Bouncy Castle是一个广泛使用的开源Java...

    bcprov-jdk15on-1.54.jar bcprov-ext-jdk15on-1.54.jar下载

    1.bcprov-ext-jdk15on-1.54.jar 2.bcprov-jdk15on-1.54.jar 下载地址在:http://download.csdn.net/detail/cw_hello1/9557049 2.将下载的两个JAR文件复制到:JDK安装目录\jre\lib\ext下,例如我的就是D:\Program ...

    bcprov-ext-jdk15on-1.68.jar

    bcprov-ext-jdk15on-1.68.jar

    jcifs-ext-0.9.4.jar

    解压即可得到jcifs-ext-0.9.4.jar, java环境资源,jdk1.6及以上

    ext-4.2.1-gpl.7z

    标题中的"ext-4.2.1-gpl.7z"指的是一个开源的软件扩展库,采用GNU General Public License(GPL)版本4.2.1发布,并被压缩为7z格式的文件。7z是一种高压缩率的文件存档格式,由7-Zip软件创建,能有效地存储大量数据...

    ext-3.3.1 ext-3.3.1

    ext-3.3.1ext-3.3.1ext-3.3.1ext-3.3.1ext-3.3.1ext-3.3.1

Global site tag (gtag.js) - Google Analytics