javascript - ExtJS4 中的 div.appendChild(div) 等效项

Question

我正在将代码转换到 ExtJs4.1.1。 在代码的一部分中，我使用了 Javascript 的 appendChild() 方法将新的 div 元素添加到现有 div 容器。

我希望现在在 ExtJs 中完成此操作。

现有代码:

var container = document.getElementById('treeContainer');
var nodeDiv = document.createElement("div");

// nodeDiv related code... setting properties and attributes
nodeDiv.innerHTML = "<div class='NodeContent'>" + node.displayText + "</div>";
nodeDiv.className = "Node";
//... more such code...

//add div to the container
container.appendChild(nodeDiv);

这段代码工作得很好。 但现在我正在使用 ExtJs 面板，我想在其中显示相同的内容。 我该怎么做？

我尝试这样做:

xtype: 'panel',
autoScroll: true,
border: 10,
bodyStyle:{"background-color":"white"}, 
height: Ext.getBody().getViewSize().height *0.80,
id: 'treeContainer'

Ext.getCmp('treeContainer').update(nodeDiv); //this didnt work
Ext.getCmp('treeContainer').addChildEls(nodeDiv); //no success

我在调试器中触发以下命令时得到此输出:

Ext.getElementById('treeContainer') 

<div class=​"x-panel x-panel-default" style=​"height:​553.6px;​" id=​"treeContainer">​
[object HTMLDivElement]
​</div>​

有什么帮助吗!？

Answer 1

面板的update函数需要 HTML 字符串而不是 DOM 对象:

// using a HTML string
Ext.getCmp('treeContainer').update("<div class='NodeContent'>" + node.displayText + "</div>");

// using a DOM object
Ext.getCmp('treeContainer').update(nodeDiv.outerHTML);

请注意，使用此函数将始终替换面板中所有现有的 HTML 内容。

<小时/>

如果您确实想要附加 HTML(即保留现有的 HTML 内容)，则需要获取一个目标元素来附加 HTML/DOM 节点。

这可能是面板的默认渲染目标元素:

var panel = Ext.getCmp('treeContainer'),
    renderEl = panel.isContainer ? panel.layout.getRenderTarget() : panel.getTargetEl();

// using a DOM node
renderEl.appendChild(nodeDiv);

// using a HTML string
renderEl.insertHtml('beforeEnd', "<div class='NodeContent'>" + node.displayText + "</div>");

或者 - 因为这可能会根据您的面板布局而改变 - 您只需在初始 html 中创建一个包含元素配置:

{
    xtype: 'panel',
    id: 'treeContainer',
    html: '<div class="html-content"></div>'
}

并在此处附加您的内容:

Ext.getCmp('treeContainer').getEl().down('.html-content').appendChild(nodeDiv);

在后两种情况下，您应该随后更新面板的布局，因为您手动更改了其内容:

Ext.getCmp('treeContainer').updateLayout();