【ExtJs】tabPanel标签页与修改标签页的内容

浏览数：37 / 时间：2015年06月09日

标签页是一个很重要的插件，正如《【mfc】标签页》（点击打开链接）在VC6中的地位，通过ExtJs中能够在网页中轻松地实现一个与客户端一模一样的标签页。

一、基本目标

创建如下的标签页，在底部的工具栏有两个按钮，一个可以增加标签页，增加的标签的内容就是当前的时间。这里只作为例子，一般标签页里面的内容，是放个iframe,或者通过无参数传递的ajax直接从别的网页中取，避免在javascript写过多的html代码，别说别人，连你自己都不知道你在写什么了，这个问题在《【Servlet】在Servlet3.0中利用ajax达到iframe局部刷新效果，同时避免在Js写过多的HTML代码》（点击打开链接）已经说过了。一个可以修改当前标签页的内容，如果没有标签页，这个按钮按不了。在每一个标签的傍边都有关闭按钮，可以关闭这个标签页。

技术分享

二、制作过程

HTML布局还是什么都没有，仅仅是引入ExtJs的资源。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>ExtJs标签页</title>
		<script type="text/javascript" src="js/ext-all.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>        
        <script type="text/javascript" src="js/ext-lang-zh_CN.js"></script>
		<link href="ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" type="text/css" >
	</head>
	<body>
	</body>
</html>

关键是下面的核心脚本，与《【ExtJs】带日期组件的文本输入框、容器与Ext.Msg.alert告警框告警两次》（点击打开链接）同样，先设置组件，再加到总的标签页里面去。

同样地，所有Ext脚本，必须写在Ext.onReady(function(){}); 里面。

首先是按钮1，“添加标签页"按钮。这里的title就是标签页的title，html里面，设置一个与当前title一模一样的id，为了之后的按钮2能够操控，如果不这样做，我尝试过所有Ext的方法，所有的get，getActiveTab().html都不给力，通通拿不到。还是用回前端最原始的，根据Id取元素最好。

Ext.util.Format.date(new Date(),‘H时i分s秒‘)可以生成当前的时间。

这个新加的标签页定义为一个名叫tab的json，通过tabPanel.setActiveTab(tab);放到tabPanel大标签页框架里面去。

其中i是一个全局变量，没增加一个标签页，自增。

		var btn1={
			xtype:'button',
			text:'添加标签页',
			listeners: {
				click: function(){
					var tab=tabPanel.add({
						title:'Tab'+i,
						html:"<div id='Tab"+i+"'>"+Ext.util.Format.date(new Date(),'H时i分s秒')+"</div>",
						closable:true//允许关闭，同时新建关闭按钮
					});
					i++;
					tabPanel.setActiveTab(tab);
				}				
			}
		};

之后是按钮2。这个按钮如果i是0则没有事件。这里关键是取到对象再赋值。tabPanel.getActiveTab().title能拿到当前标签页的标签，tabPanel.getActiveTab().html却不能拿到当前标签的内容，不明白为什么，改成innerHTML,value等都拿不到，于是，只能通过与document.getElementById同等的Ext.getDom去出那个以标签页标题等同的div，再通过非常给力的innerHTML给它赋值。

这个弹出的文本框，在《【ExtJs】模态确定框与模态输入框》（点击打开链接）已经说过了，不赘述。

		var btn2={
			xtype:'button',
			text:'修改标签页内容',
			listeners: {
				click: function(){
					if (i != 0) {
						Ext.Msg.prompt("请输入一些东西", "将替换当前文本框的内容！", function(btn, text){
							if (btn == 'ok') {
								Ext.getDom(tabPanel.getActiveTab().title + "").innerHTML=text;
							}
						}, this, true, "");
					}
				}				
			}		
		};

最后，再把按钮1、2放到标签页的大框架里面：

		var tabPanel=Ext.create('Ext.tab.Panel',{
			renderTo:Ext.getBody(),//显示到body节点下，默认不显示
			height:350,
			bbar:[{xtype:'tbfill'},btn1,btn2,{xtype:'tbfill'}]//表示底部标题栏的内容，前后两个{xtype:'tbfill'}代表使btn1与btn2居中
		});

三、总结

于是，整个网页的代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>ExtJs标签页</title>
		<script type="text/javascript" src="js/ext-all.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>        
        <script type="text/javascript" src="js/ext-lang-zh_CN.js"></script>
		<link href="ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" type="text/css" >
	</head>
	<body>
	</body>
</html>
<script>
	var i=0;
	Ext.onReady(function(){
		var btn1={
			xtype:'button',
			text:'添加标签页',
			listeners: {
				click: function(){
					var tab=tabPanel.add({
						title:'Tab'+i,
						html:"<div id='Tab"+i+"'>"+Ext.util.Format.date(new Date(),'H时i分s秒')+"</div>",
						closable:true//允许关闭，同时新建关闭按钮
					});
					i++;
					tabPanel.setActiveTab(tab);
				}				
			}
		};
		var btn2={
			xtype:'button',
			text:'修改标签页内容',
			listeners: {
				click: function(){
					if (i != 0) {
						Ext.Msg.prompt("请输入一些东西", "将替换当前文本框的内容！", function(btn, text){
							if (btn == 'ok') {
								Ext.getDom(tabPanel.getActiveTab().title + "").innerHTML=text;
							}
						}, this, true, "");
					}
				}				
			}		
		};	
		var tabPanel=Ext.create('Ext.tab.Panel',{
			renderTo:Ext.getBody(),
			height:350,
			bbar:[{xtype:'tbfill'},btn1,btn2,{xtype:'tbfill'}]			
		});
	});	
</script>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

【ExtJs】tabPanel标签页与修改标签页的内容