将 Extjs 元素渲染到其他框架中答案

【问题标题】：Render Extjs elements into other frame将 Extjs 元素渲染到其他框架中
【发布时间】：2014-03-10 10:57:08
【问题描述】：

我想在 iframe 中呈现 Ext 元素。

在加载到 iframe 的页面中，我有一个 div 元素：

<div id="panel"></div>

加载 iframe 后，我想在这个 div 元素中渲染一个 Ext 面板。

所以加载到 iframe 中的页面有一个在加载时执行的函数：

console.log(parent.Ext.get("panel"));
console.log(document.getElementById("panel"));
console.log(new parent.Ext.dom.Element(document.getElementById("panel")));
parent.Ext.create('Ext.Panel',{
    layout : 'fit',
    height : 200,
    width : 600,
    autoScroll: false,
    renderTo : new parent.Ext.dom.Element(document.getElementById("panel"))
});

控制台消息如下：

null VM14143:10
<div id="panel">…</div> VM14143:11
D {el: D, dom: div#panel, id: "panel", $cache: Object, self: function…} VM14143:12
TypeError: Cannot read property 'dom' of null

无论我将三个console.log 中的哪一个放入renderTo：renderTo: parent.Ext.get("panel") 或renderTo: document.getElementById("panel") 或renderTo: new parent.Ext.dom.Element(document.getElementById("panel"))，都会发生TypeError，但是当我完全删除renderTo 行时它不会发生。

现在，如何将面板渲染到我的 div 中？

【问题讨论】：

你能详细说明你想在这里做什么吗？
我修改了我的问题，并真诚地希望现在可以理解我想要实现的目标。

标签： javascript html iframe extjs

【解决方案1】：

您尝试做的事情是错误的。因为当你做parent.Ext时，它将在父范围内执行而不是在当前范围内（即 iframe）所以你需要做的是，将 ExtJS 库也加载到 iframe 中，然后执行代码。

【讨论】：

范围正是我尝试使用 parent.Ext 的原因，其中所需的存储、数据预处理等已经完成。在 iframe 中再次执行所有操作对性能来说是不健康的 - 重新加载 JS、初始化、加载数据。
父Ext dom范围是它自己的dom。它不会被 iframes dom 所困扰。基本上 ExtJs 不是为 iFrame 构建的。不建议将 iFrame 用于任何内容。但是如果你想去 iFrame，那么再次加载 JS 是最好的选择。