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

躁动的青年

于 2020-05-15 08:20:43 发布

阅读量170

点赞数

分类专栏： Ext 文章标签： Ext tab 添加激活 iframe

本文链接：https://blog.csdn.net/haveqing/article/details/84715975

版权

Ext 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

选项卡

//选项卡
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