代码之家 › 专栏 › 技术社区 › DarkKnightFan

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

extjs4.1 extjs javascript

DarkKnightFan · 技术社区 · 12 年前

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

我想现在在ExtJ中完成。

现有代码:

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>â

有什么帮助吗!?

1 回复 | 直到 12 年前

matt 12 年前

面板的 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>");

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

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

并将您的内容附加到那里:

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

在后两种情况中的任何一种情况下,您都应该在手动更改面板内容时更新面板的布局:

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