2010.04.14(3)———Ext 之tab_addTab 添加标签

最新推荐文章于 2023-05-11 16:53:56 发布

cody123

最新推荐文章于 2023-05-11 16:53:56 发布

阅读量457

点赞数

文章标签： EXT Java HTML

本文链接：https://blog.csdn.net/cody123/article/details/83610952

版权

2010.04.14(3)———Ext 之tab_addTab 添加标签

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>添加标签</title>
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <!-- ext-base.js必须在ext-all前面，不然，Ext无法识别 -->
    <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="extjs/ext-all.js"></script>
<style type="text/css">
.tabs{
	 background-image: url(images/tab_addTab/tabs.gif)
} 

.new{
	 background-image: url(images/tab_addTab/new_tab.gif)
}   
</style>

<script type="text/javascript">
Ext.onReady(function(){
	var tab = new Ext.TabPanel({
		renderTo: "tab",
		width: 600,
		height: 300,
		closable: true,
		resizeTabs: true,//true,将会设向每个标签设定特定的宽度，即使不在可见区域了
		minTabWidth: 100,//当 resizeTabs = true 时，每个标签页的最小宽度像素值 
		tabWidth: 120,//每个新的tab页的初始宽度(默认值为 120)。
		enableTabScroll: true
		//允许用滑轮来滚动选项卡，
		//并且当选项卡过多时 会显示两个图标，一个向左，一个向右


	});

	var index = 0;
	while(index<7)
		addTab();
	function addTab(){
		tab.add({
			title: "标签  "+(++index),
			iconCls: "tabs",//上面定义的css
			html: "新建标签  "+(index),
			closable: true
		}).show();//*****这个show方法让最新添加的tab显示出来 会有一个动态的效果
	}

	new Ext.Button({
		text: "添加Tab",//按钮上的文字
		handler: addTab,//按钮点击后执行的方法
		iconCls: "new"//上面定义的css样式
	}).render(document.body,"tab");//在body中创建button，并且在"tab"（容器内的一个元素ID或者一个DOM节点序号）之上
});


</script>
</head>

<body>
<div id="tab" ></div>
</body>
</html>