ext tabpanel的使用

最新推荐文章于 2025-08-09 20:51:19 发布

原创最新推荐文章于 2025-08-09 20:51:19 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

javascript 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何使用Ext JS框架创建Tab面板，并实现了动态添加Tab的功能。通过实例展示了如何配置Tab面板的各项属性，以及如何通过事件监听实现Tab的动态添加与激活。同时，还介绍了如何在页面中渲染按钮来触发动态添加操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<link rel="stylesheet" type="text/css" href="ext-3.4.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.4.0/ext-all.js"></script>

<script type="text/javascript">
Ext.onReady(function() {

    new Ext.TabPanel({
	id: "mainTab",
	renderTo: "div1",
	width: 500,
	height: 300,
	activeTab: 0,
	defaults: {
		autoScroll: true,
		autoHeight:true,
		style: "padding:5"
	},
	items:[
		{title:"normal", tabTip:"mormal", html:"tab1", iconCls:"add"},
		{title:"ajax1", autoLoad:"messagebox.action", iconCls:"delete"},
		{title:"ajax2", autoLoad:{url:"test.action", params:"p1=v1", nocache:true}, iconCls:"search"},
		{title:"event", iconCls:"save", listeners:{activate:activateHandler}}
	],
	enableTabScroll: true
});

function activateHandler(tab){
	//alert(tab.title);
}

var index = 0;
function addTab(){
	var tabs = Ext.getCmp("mainTab");
	
	var t = tabs.getItem("tab"+index);
	if(t) tabs.remove(t);
	
	tabs.add({
		id: "tab" + (++index),
		title: "NewTab" + index,
		html: "new tab" + index,
	//设置可被关闭
		closable: true
	}).show();
}

//按钮渲染到div1元素之前
new Ext.Button({
	text:"add tab",
	handler:addTab,
	iconCls:"add"
}).render(document.body, "div1");


	});

</script>


</head>
<body>
<div id="div1"><div>
</body>
</html>

来源于网络，另附结合TreeNode