如何将DOM节点添加到ExtJS中的面板

我需要在ExtJS应用程序中嵌入遗留javascript代码。我们的应用程序将使用ExtJS对话框来显示旧的javasccript表单（在我们最终开始在ExtJS中重做它们之前）

我正在尝试将DOM节点添加到Ext.Panel（或者Ext.window.window）。不确定是否可能或有什么方法。我需要某种appendChild方法，如下所示：

var mainPanel = document.create('div');

mainPanel.appendChild(getVeryComplicatedLegacyHTML())


var p =  new Ext.Panel({
     title: 'another panel',
     titleCollapse: true
});

p.appendChild(mainPanel ); //???

这在ExtJS中可能吗

这在ExtJS中可能吗

这里没有魔法。。。在extcover下，使用简单的旧html和css

Ext.panel.panel

（任何Ext组件及其子体）没有

appendChild

方法。 具有doElement的

Ext.dom.Element

包装器，任何组件都通过

el

/具有其元素引用

简单的例子是，在一个面板中创建一个带有遗留html的辅助组件。 呈现面板时，使用方法（使用

this.el.update（）

）将遗留html注入组件中：

---

在第四行，fakecomponent.el未定义。在包含DOM对象之前，该组件是否首先需要添加到某个位置或呈现在某个位置？是的，我已经更新了答案（呈现面板时，将使用遗留html更新假组件）。当呈现一个组件时，它的

el

可以用于添加/更新等。如果我有行fakeCmp.update（document.createElement（'div'）；它无法呈现。它只是在面板中打印出字符串[object htmldevelment]是的，请查看

Ext.Component#update

方法的文档，该方法在当前情况下使用隐藏的

Ext.dom.Element#update

，该方法接受html字符串作为第一个参数（我在回答中添加了链接）。您可以使用

fakeCmp.getEl（）.appendChild（document.createElement（'div'））

来添加dom元素。另一个有用的

Ext.dom.element

方法是例如

fakeCmp.el.createChild（{tag:'div'，html:'hello'}）

或

fakeCmp.el.createChild（document.createElement（'div'））

也可以查看

var p = new Ext.Panel({
     title: 'another panel',
     titleCollapse: true,
     items: [
     {
         xtype: 'box',
         itemId: 'fake-cmp'
     }],
     listeners: {
         boxready: function(panel) {
             var fakeCmp = panel.down('#fake-cmp');
             fakeCmp.update(getVeryComplicatedLegacyHTML());
         } 
     }
});