Problem with Extjs dom and Ext.Element

Question

I create elements with Ext.element as follows:

var table = new Ext.Element(document.createElement('table')); for(n=0;n<5;n++) { row = new Ext.Element(document.createElement('tr')); for(x=0;x<4;x++) { col = new Ext.Element(document.createElement('td')); col.update('cell text '+x); row.appendChild(col); } table.appendChild(row); } Ext.fly('data').replaceWith(table); 

It works I'm FF, but not in IE, why?

Answer 1

The following code worked in IE8 with ExtJS 3.3

 var table = new Ext.Element(document.createElement('table')); for(n=0;n<5;n++) { var row = new Ext.Element(document.createElement('tr')); for(x=0;x<4;x++) { var col = new Ext.Element(document.createElement('td')); col.update('cell text '+x); row.appendChild(col); } table.appendChild(row); } Ext.fly('data').replaceWith(table); 

Answer 2

Try using Ext.DomHelper to create and work with DOM elements. Take a look at DomHelper in the Ext API documentation and follow this tutorial .

Answer 3

This is an old post, but for those who are still looking for answers, please check below code that should work well in IE.

 var table = new Ext.Element(document.createElement('table')); var tbody = new Ext.Element(document.createElement('tbody')); for(n=0;n<5;n++) { var row = new Ext.Element(document.createElement('tr')); for(x=0;x<4;x++) { var col = new Ext.Element(document.createElement('td')); col.update('cell text '+x); row.appendChild(col); } tbody.appendChild(row); } table.appendChild(tbody); Ext.fly('data').replaceWith(table);