div.appendChild(div) equivalent in ExtJS4

Question

I am transitioning my code to ExtJs4.1.1. In one part of the code I have used Javascript's appendChild() method to add new div elements to an existing div container.

I want this to be done in ExtJs now.

Existing code:

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

This code works perfectly fine. But now I am using an ExtJs Panel wherein I want to display the same content. How do I do it?

I tried doing:

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

I get this output on firing the below command in debugger:

Ext.getElementById('treeContainer') 

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

Any help!?

Answer 1

The panel's update function expects a HTML string instead of a DOM object:

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

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

Note, that using this function will always replace all existing HTML content in the panel.

---

If you really want to append HTML (i.e. preserve existing HTML content), you need to get a target element to append your HTML/DOM node to.

This could be the panel's default render target element:

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

Or - as this may change depending on your panel's layout - you just create a containg element in your initial html config:

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

and append your content there:

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

In any of the latter two cases, you should update the panel's layout afterwards, as you changed it's content manually:

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