ext tabpanel的施用 _Web前端

ext tabpanel的使用
<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