2010.04.14———Ext 之tab_TabPanel

2010.04.14———Ext 之tab_TabPanel

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>TabPanel</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>
    
<script type="text/javascript">
/*
Ext.onReady(function(){
	var tab1 = new Ext.TabPanel({
		applyTo: "tab_1",
		autoTabs: true,
		deferredReader: false,
		activeTab: 0,
		width: 450,
		frame:true,
		height: 300
		//defaults: {autoHeight: true}
	});
});
*/

Ext.onReady(function(){
	var tab2 = new Ext.TabPanel({
		renderTo: "tab_2",//该值可以是一个节点的id、一个DOM节点或者一个已存在的元素, 组件将会被渲染到其中。
		frame: true,
		width: 450,
		height: 300,
		//defaults: {autoHeight: true},
		activeTab: 0,
		items: [
			{contentEl: "t1",title:"标签1"},//一个已存在的HTML节点的id,它被当作panel的body元素内容来使用
			{contentEl: "t2",title:"标签2"}
		]
	});
});



</script>
</head>
  
<body>
<!--  
<div id="tab_1">
	<div class="x-tab" title="标签1">
		阿飞奇偶撒度附近啊来看
	</div>
	<div class="x-tab" title="标签2">
		发撒大幅耳语
	</div>
</div>
-->
  
<div id="tab_2" >
	<div class="x-hide-display" id="t1">
		fjklsdajfioewjfiewjfklsdajfklsdjka
	</div>
	<div class="x-hide-display" id="t2">
		fjklsdajfioewjfiewjfklsdajfklsdjka
	</div>
</div>

</body>
</html>












你可能感兴趣的:(java,html,ext)