Ext4.2 tabPanel 添加选项卡，激活选项卡，使用iframe加载内容，监听事件

最新推荐文章于 2026-05-14 05:01:06 发布

原创最新推荐文章于 2026-05-14 05:01:06 发布 · 241 阅读

0 ·

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

收录于

Ext

本文介绍了如何使用ExtJS框架创建选项卡面板组件，并详细解释了如何设置默认活动选项卡、选项卡滚动等功能，还提供了添加自定义选项卡的方法。

选项卡

//选项卡
var tabs1 = Ext.createWidget('tabpanel', { 
    renderTo: "tabPanel", 
    activeTab: 1,                       //指定默认的活动tab 
    width: 600, 
    height: 120, 
    plain: true,                        //True表示tab候选栏上没有背景图片（默认为false） 
    enableTabScroll: true,              //选项卡过多时，允许滚动 
    defaults: { autoScroll: true },
    tabBar: {
        height: 25,		//tab bar高度
        defaults: {
            height: 23	//tab 里的title的高度
        }
    },
    items: [{ 
        id: "indexTab", 
        title: '首页 ', 
        html: "欢迎使用本系统"//, 
        //items:[{xtype:'button',text:'按钮'}], 
        //closable: true                  //这个tab可以被关闭 
    }] 
});

方法

//添加选项卡
function addTab(id,title,url){
	if (Ext.getCmp('tab'+id)){	//加前缀防止id冲突
		//如果已经存在选项卡，则激活
		tabs1.setActiveTab('tab'+id);  
	} else {
		//alert(url);
		tabs1.add({
	        id: 'tab'+id, 
	        title: title, 
	        closable: true,
	        html: '<iframe id=iframe"'+id+'" src="/myplat'+url+'" width="100%" height="100%" frameborder="0" scrolling="no"/>',
	        listeners: { 
	        	activate: function (tab,eOpts) {
	        				//alert(tab.title+'activate事件触发!');
	        				//Ext.Msg.alert('提示', tab.title+'activate事件触发!');
	        			},
	        	close : function (panel,eOpts) {
	        				//alert('close事件触发!');
	        			}
	        }
	    });
		tabs1.setActiveTab('tab'+id); //激活新的选项卡
	}

}

参考：

ExtJs4 笔记（10） Ext.tab.Panel 选项卡
http://www.cnblogs.com/lipan/archive/2011/12/21/2295355.html

标签

#Ext #tab #添加 #激活 #iframe