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

最新推荐文章于 2026-05-21 13:16:52 发布

原创最新推荐文章于 2026-05-21 13:16:52 发布 · 4.7k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

extjs

这篇博客详细介绍了ExtJS中的TabPanel组件，包括它的继承结构和三种添加Tab的方法：在items中直接添加、引用div及调用add方法。通过实例展示了如何创建和操作TabPanel。

1、TabPanel的继承结构

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