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,問題迎刃而解;

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