Ext_标签面板_Ext.TabPanel

/*
Ext.TabPanel主要配置项目表:
activeTab                     String/Number          设置默认激活的tab页的id或索引
animScroll                    Boolean                设置是否在tab页滚动时用动画效果
autoTabSelector               String                 在dom中自动找div的样式选择器(默认'div.x-tab',在autoTabs=true时生效)
autoTabs                      Boolean                设置是否在dom中查找样式类为'x-tab'的div,并转换为tab页(默认false)
enableTabScroll               Boolean                是否在tab标签总宽度超出可用宽度时自动出现滚动按钮(默认false)
layoutOnTabChange             Boolean                是否在tab页切换时重新对tab页元素进行布局
minTabWidth                   Number                 tab标签最小宽度(默认30,只在resizeTabs=true生效)
resizeTabs                    Boolean                设置是否允许tab标签自动调整宽度
scrollDuration                Float                  每次滚动tab标签执行动画的时间(默认.35,只在animScroll=true生效)
scrollIncrement               Number                 每次滚动tab标签的长度(默认100,只在enableTabScroll=true生效)
scrollRepeatInterval          Number                 鼠标左键连续按下，执行滚动操作的时间间隔
tabMargin                     Number                 以像素为单位计算的空白空间
tabPosition                   String                 tab标签在面板上的位置(默认top,bottom)
tabWidth                      Number                 tab标签的初始宽度(默认120)
*/

1.通过items添加标签页

/*通过items添加标签页示例*/
Ext.onReady(function(){
	var config = {
		height:150,
		width:300,
		activeTab:0,                   //默认激活第一个tab页
		animScroll:true,              //使用动画滚动效果
		enableTabScroll:true,         //tab标签过宽时自动显示滚动条
		renderTo:'panel',
		//通过items将标签页以子面板的方式加入TabPanel
		items:[
			{title:'tab标签页1',html:'tab标签页1内容'},
			{title:'tab标签页2',html:'tab标签页2内容'},
			{title:'tab标签页3',html:'tab标签页3内容'},
			{title:'tab标签页4',html:'tab标签页4内容'},
			{title:'tab标签页5',html:'tab标签页5内容'}
		]
	}
	
	new Ext.TabPanel(config);
});

2.通过页面div自动添加标签页

/*通过页面div自动添加标签示例*/
Ext.onReady(function(){
	var config = {
		height:50,
		width:300,
		autoTabs:true,                  //自动扫描页面中的有效div然后转换为标签
		deferredRender:false,           //不进行延时渲染
		//deferredRender:true,
		activeTab:0,                    //默认激活第一个标签
		animScroll:true,               //使用动画滚动效果
		enableTabScroll:true,          //tab标签超宽时自动出现滚动条
		applyTo:'panel'                //此处必须使用applayTo定位
	}
	
	/*
	自动扫描有效div转换为tab页
	有效div:该div必须是在applyTo:'panel'中的div，且必须有正确的样式类,默认'x-tab',可通过autoTabSelector指定
	*/
	
	new Ext.TabPanel(config);
});

<div id="panel">
<div class="x-tab" title="tab标签页1">tab标签页1内容</div>
<div class="x-tab" title="tab标签页2">tab标签页2内容</div>
<div class="x-tab" title="tab标签页3">tab标签页3内容</div>
<div class="x-tab" title="tab标签页4">tab标签页4内容</div>
<div class="x-tab" title="tab标签页5">tab标签页5内容</div>
</div>

<div class="x-tab" title="tab标签页6">无效tab标签页6内容</div>

3.动态添加标签页

/*动态添加标签页*/
Ext.onReady(function(){
	var config = {
		height:150,
		width:300,
		activeTab:0,                    //默认激活第一个tab页
		animScroll:true,               //使用动画滚动效果
		enableTabScroll:true,          //tab标签超宽时自动出现滚动按钮
		renderTo:'panel',
		items:[
			{title:'tab标签页1',html:'tab标签页1内容'}
		],
		//自动添加标签的按钮
		buttons:[
			{
				text:'添加标签页',
				handler:addTabPage      //处理函数
			}
		]
	}
	
	var tabPanel = new Ext.TabPanel(config);
	
	//添加tab页
	function addTabPage()
	{
		var index = tabPanel.items.length + 1;
		
		//创建新标签页
		var tabPage = tabPanel.add({
			title:'tab标签页' + index,
			html:'tab标签页' + index + '内容',
			closable:true                           //允许关闭该标签页
		});
		
		//设置当前显示的标签页
		tabPanel.setActiveTab(tabPage);
	}
});