将Extjs元素渲染到其他框架中 [英] Render Extjs elements into other frame

问题描述

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

 < div id =panel>< / div> 
  

当iframe加载时，我想将一个Ext面板渲染到这个div元素中。 >

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

 的console.log（parent.Ext.get（ 面板））; 
 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：无法读取属性'dom'为null 
  

TypeError发生在无论我放在renderTo中的三个console.log中哪一个： renderTo：parent.Ext.get （panel）或 renderTo：document.getElementById（panel）或 renderTo：new parent.Ext。 dom.Element（document.getElementById（panel）），但是当我完全删除 renderTo 行时，不会发生。 >

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

解决方案

什么你想做的是错的。因为当你做parent.Ext，
它将在父范围内执行在当前作用域（这是iframe）
所以你需要做的是，在iframe中加载了ExtJS库，执行代码。

I want to render Ext elements in an iframe.

In the page that is loaded into the iframe, I have a div element:

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

When the iframe is loaded, I want to render an Ext panel into this div element.

So the page loaded into the iframe got a function which is executed on load:

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"))
});

The console messages are as follows:

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

The TypeError is occuring no matter which of the three console.logs I put into renderTo: renderTo: parent.Ext.get("panel") or renderTo: document.getElementById("panel") or renderTo: new parent.Ext.dom.Element(document.getElementById("panel")), but it does not occur when I remove the renderTo line completely.

Now, how can I render a panel into my div?

解决方案

What you are trying to do is wrong. Because when you do parent.Ext, it will execute in parent scope than in current scope(which is iframe) So what you need to do is, have ExtJS library loaded in the iframe as well, and execute the code.

这篇关于将Extjs元素渲染到其他框架中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！