TabPanel的基本用法

最新推荐文章于 2024-08-31 10:28:49 发布

he_chenjun

最新推荐文章于 2024-08-31 10:28:49 发布

阅读量6.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： Extjs3.4

本文链接：https://blog.youkuaiyun.com/he_chenjun/article/details/9146859

Extjs3.4 专栏收录该内容

10 篇文章

订阅专栏

本文深入解析了Ext.js中的TabPanel组件，包括其创建、配置、添加选项面板以及激活特定面板的过程。TabPanel作为常用UI组件，通过实例化、设置属性和调用方法来实现选项卡式的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

TabPanel很常用，选项面板，代码如下：

Ext.onReady(function(){
	var tab = new Ext.TabPanel({
		renderTo:Ext.getBody(),
		width:300,
		height:200
	});
	tab.add({
		id:'tab1',
		title:'Tab1',
		html:'Tab1内容'
	});
	tab.add({
		id:'tab2',
		title:'Tab2',
		html:'Tab2内容'
	});
	tab.activate(0);
});

1、首先创建一个TabPanel对象（可以看出，Extjs也是面向对象的），然后进行配置，添加两个tab页，activate方法是激活哪个tab页

2、renderTo:Ext.getBody()是渲染整个页面

3、其实Extjs很简单，一般步骤是创建一个对象，配置一些属性，调用一些方法产生特定的效果