如何将我的 div 元素渲染到 extJS 面板

Question

How to render my div element to extJS panel.

I have my panel in extJS. Inside the panel I wanted to render my own component which I have created as html component.

Here is my panel code.

{
    "xtype" : "panel",
    "title" : "top",
    "itemId" : "myPanel",
    "width" : 400
}

now here is the code where I am creating div and want to render on panel.

boxready : function(){
    var me = this,
 view = me.getView();

 var myLits = [ "Test1", "Test2", "Tst3"];
        
        

var mydiv = document.createElement("div");
var table = document.createElement("table");
table.id='someId';
var tbody = document.createElement("tbody");
table.appendChild(tbody);
var tr = document.createElement("tr");
tr.appendChild(document.createElement("td"));
tr.appendChild(document.createElement("td"));
tbody.appendChild(tr);
for(var i=0;i<myLits.length;i++){
    var tr = document.createElement("tr");
    var td1 = document.createElement("td");
    var td2 = document.createElement("td");
    td1.style='width:7%';
    td2.style='width:93%';
    
    td2.appendChild(document.createTextNode(myLits[i]));
    tr.appendChild(td1);
    tr.appendChild(td2);
    tbody.appendChild(tr);
}
mydiv.appendChild(table); 



//Here I am adding in html but not getting sucess. 


view.add(Ext.create('Ext.Panel', {
    html: mydiv
}));
}

IS this a correct way to add. Can anybody help me here.

Answer 1

Just use it like this:

view.add(Ext.create('Ext.Panel', {
    html: mydiv.innerHTML
  }));
}