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: "",
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: "",//直接写会报错
listeners: {
afterrender: () => {
Ext.getCmp("dashBoard").setHtml("");
}
}
}
]
});给出最终效果图:
总结: Ext6中不支持html为iframe的写法.依据错误提示原因不难看出是因为加载iframe的时候,这个dashBoard(id)的子面板还没有载入到浏览器dom对象中,因此会提示null/undefined的错误;
依据这个思路,那么我只需要在这个子面版加载完成后,给它设置html,问题迎刃而解;
希望本篇博客能帮助到你;