ExtJS学习笔记之四------- TabPanel

1、TabPanel的继承结构

ExtJS学习笔记之四------- TabPanel_第1张图片

 

2、TabPanel例子

TabPanel中添加Tab有三种方法,

(1)在items中直接添加

(2)在items中引用div

(3)调用方法add

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ExtJS TabPanel</title>
	<link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css"/>
	<script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base-debug.js"></script>
	<script type="text/javascript" src="ext-3.4.1/ext-all-debug.js"></script>
	<script type="text/javascript" src="ext-3.4.1/src/locale/ext-lang-zh_CN.js"></script>
	<script type="text/javascript">
	Ext.onReady(function(){
		var tabPanel = new Ext.TabPanel({
			renderTo: Ext.getBody(),
			width: 500,
			height: 300,
			activeTab: 0,
			items:[{id: 'tabId1', title: 'tab1', html: 'tab1 content', closable: true, layout: 'fit'},
					{id: 'tabId2', title: 'tab2', contentEl:'tab2', closable: true, layout: 'fit'}]
		});

		tabPanel.add({id: 'tabId3', title: 'tab3', html: 'tab3 content', closable: true, layout: 'fit'});
	});
	</script>
  </head>
  <body>
  <div id="tab2" class="x-hide-display">A simple tab</div>
  </body>
</html>

程序运行结果

ExtJS学习笔记之四------- TabPanel_第2张图片


你可能感兴趣的:(ExtJs,tabpanel)