(35)动态添加标签页示例

最新推荐文章于 2023-09-08 14:28:44 发布

无人与我共黄昏

最新推荐文章于 2023-09-08 14:28:44 发布

阅读量1.5k

点赞数

分类专栏： ExtJS案例

本文链接：https://blog.csdn.net/Xuan6251237011/article/details/22539469

版权

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

47 篇文章 0 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

EXTJS代码

47 篇文章 0 订阅

订阅专栏

本示例展示了如何在ExtJS中动态创建并添加标签页。通过Ext.onReady函数，创建了一个Ext.tab.Panel组件，包含一个预设的标签页和一个添加按钮。点击按钮时，会调用addTabPage函数，生成新的标签页并将其添加到面板中，同时设置为活动标签页。

摘要由CSDN通过智能技术生成

//11动态添加标签页示例
Ext.onReady(function(){
	var tabPanel=Ext.create('Ext.tab.Panel',{
		title:'Ext.tab.Panel示例（动态添加tab页示例）',
		frame:true,
		height:150,
		width:300,
		activeTab:0,//默认激活第一个tab页
		renderTo:Ext.getBody(),
		items:[{
			title:'tab标签页1',
			html:'tab标签页1内容'
		}],
		buttons:[{
			text:'添加标签页',
			handler:addTabPage
		}]
	});
	
	function addTabPage(){
		var index=tabPanel.items.length+1;
		var tabPage=tabPanel.add({//动态添加tab页
			title:'tab标签页'+index,
			html:'tab标签页'+index+'内容',
			closable:true//允许关闭	
		})
		tabPanel.setActiveTab(tabPage);//设置当前tab页
	}
	
});