ExtJS梦想之旅（七）--TabPanel的使用

最新推荐文章于 2013-07-23 23:28:41 发布

Seven的代码实验室

最新推荐文章于 2013-07-23 23:28:41 发布

阅读量1.4k

点赞数

分类专栏： ExtJS专栏 ExtJS框架学习文章标签： Ext.TabPanel Ext中选项卡面板

本文链接：https://blog.csdn.net/JavaChenZhenlin/article/details/9429397

版权

ExtJS专栏同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

ExtJS框架学习

10 篇文章 2 订阅

订阅专栏

Ext.TabPanel是一种基础性的tab容器。Tab面板可用像标准Ext.Panel一样参与布局，亦可将多个面板归纳为一组tabs之特殊用途。这里没有单独而设的tab类—，每一张tab便是一个Ext.Panel。然而，在当Panel放进TabPanel里面的时候，它作为子面板渲染的同时会额外增加若干事件，而这些事件一般的Panel是没有的。

TabPanel的示例：

tabpanel.js

// tabpanel的使用
Ext.onReady(function() {
	var tabpanel = new Ext.TabPanel({
		// 指定当前活动的选项面板是第一个
		activeTab : 0,
		// 指定选项卡在什么位置
		// tabPosition : "bottom",
		// 指定底部工具栏
		bbar : [ {
			text : "添加选项",
		}, {
			text : "删除选项"
		} ],
		items : [ {
			title : "面板一",
			html : "this is tab1",
		}, {
			title : "面板二",
			autoLoad : "news.jsp"
		}, {
			title : "面板三",
			autoLoad : "news.jsp",
			closable : true
		} ]
	});
	new Ext.Viewport({
		// fit布局表示充满整个viewport
		layout : "fit",
		items : tabpanel
	});
	/*
	 * var tabs = new Ext.TabPanel({ renderTo: Ext.getBody(), activeTab: 0,
	 * items: [{ title: 'Tab 1', html: 'A simple tab' },{ title: 'Tab 2', html:
	 * 'Another one' }] });
	 */

});

tabpanel.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ext-TabPanel的使用</title>
<link href="ext-3.4.1/resources/css/ext-all.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>
<script type="text/javascript" src="tabpanel.js"></script>
</head>
<body>

</body>
</html>

Seven的代码实验室

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
ExtJS梦想之旅（七）--TabPanel的使用

Ext.TabPanel是一种基础性的tab容器。Tab面板可用像标准Ext.Panel一样参与布局，亦可将多个面板归纳为一组tabs之特殊用途。这里没有单独而设的tab类—，每一张tab便是一个Ext.Panel。然而，在当Panel放进TabPanel里面的时候，它作为子面板渲染的同时会额外增加若干事件，而这些事件一般的Panel是没有的。 TabPanel的示例：tabp
复制链接

扫一扫