ExtJS 6 Panel对象 使用 iframe

ExtJS 6  Panel对象 使用 iframe

背景:之前的项目是基于Ext3.4版本;现在要求使用Ext6.2;均为在TabPanel中某个标签面板增加iframe

本篇博客给出两个版本的示例:

• Ext3.4 Panel使用iframe

//基于Ext3.4
var tabPanel = new Ext.TabPanel({
	...
	...
	items: [
		...
		...
		{
			title: '首页',
			region: 'center',
			border: false,
			html: "<iframe id='DashBoard' frameborder = '0' height = '100%' name='DashBoard' width = '100%' src='dashboard/DashBoard.html'/>",
			split: true,
			listeners: {
				afterrender: function (p) {
					setTimeout(function () {
						//这里调用定时器刷新了一下,看情况可以不需要;
						window.frames["DashBoard"].src = window.frames["DashBoard"].src;
					}, 3000);
				}
			}
		}
	]
});

• Ext6.x Panel使用iframe

//基于Ext6.2
Ext.define('ECIMS.view.main.Main', {
	extend: 'Ext.panel.Panel',
	xtype: 'app-main',

	...
	...

	items: [{
			id: "dashBoard",
			title: 'DashBoard',
			border: false,
			//html: "<iframe id='DashBoard' frameborder = '0' height = '100%' name='DashBoard' width = '100%' src='dashboard/DashBoard.html'/>",//直接写会报错
			listeners: {
				afterrender: () => {
					Ext.getCmp("dashBoard").setHtml("<iframe id='DashBoard' frameborder = '0' height = '100%' name='DashBoard' width = '100%' src='dashboard/DashBoard.html'/>");
				}
			}
		}
	]

});

给出最终效果图:

总结: Ext6中不支持html为iframe的写法.依据错误提示原因不难看出是因为加载iframe的时候,这个dashBoard(id)的子面板还没有载入到浏览器dom对象中,因此会提示null/undefined的错误;

依据这个思路,那么我只需要在这个子面版加载完成后,给它设置html,问题迎刃而解;

希望本篇博客能帮助到你;