View Full Version : mistake with createChild in IE

26 Oct 2009, 4:27 AM
I'm thinking about suicide. Internet Explorer sucks, as always. I'm trying this:

for( var i in this.colModel ) {
Ext.fly(theadTrEl).createChild( this.colModel[i] );

Where colModel is something like that:

{tag: 'td', id: 'nombre', width: 200, html: 'Nombre'},
{tag: 'td', id: 'dnicif', html: 'Cif'}

And theadTrEl is a tr element from a thead section from a table. Explorer shows me an alert:

"Unknown error in execution time"

Does anybody know what is happening?

26 Oct 2009, 5:34 AM
You don't loop through arrays using "for( var i in this.colModel )"

You use "for (var i = 0; i < this.colModel.length; i++)"

26 Oct 2009, 6:27 AM
I've change the loop, same problem. This is the whole Javascript code:

TtecGrid = function(tableId, pagbarId, colModel, config){
this.config = config || {};
this.tableId = tableId;
this.pagbarId = pagbarId;
this.colModel = colModel;

TtecGrid.prototype = {
init : function(){
headerEl = Ext.get(this.tableId);
theadTrEl = Ext.get(headerEl).
createChild({tag: 'thead'}).createChild({tag: 'tr'});
for (var i = 0; i < this.colModel.length; i++){
Ext.get(theadTrEl).createChild( this.colModel[i] );


Ext.get(headerEl).createChild({tag: 'thead'}) crashes in IE. This is the html code:

<script type="text/javascript">
var mygrid = new TtecGrid('myTable', 'toolbar',
{tag: 'td', id: 'nombre', width: 200, html: 'Nombre'},
{tag: 'td', id: 'dnicif', html: 'Cif'}

Ext.onReady(function() {

<table id="myTable" width="100%" border="0" style="font-size:12pt;">
<td colspan="2">
<div id="toolbar"></div>

I don't understand, it seems Element.createChild is failing in IE :((

15 Mar 2010, 6:44 AM
I've got the same problem in f***ing IE, and found the following Workaround:

The line throwing the runtime error is the following:

el.innerHTML = createHtml(o);

(line 412 in ext-all-debug.js (ext-3.1.1)

IE always crashes here, no matter which value is assigned to innerHTML property.

This doesn't happen if innerHTML property is not empty.
So I created the new Ext.Element based on an existing HTML Element:

<div id="iesucks"></div>

var el=new Ext.Element(Ext.get('iesucks'));
//do something with the el...

// clear the html element to avoid changes from displaying in it...

Hope this helps until IE hopefully will be forbidden by law, or this issue is fixed...

15 Mar 2010, 6:51 AM
I think the issue is IE specific, usually occurs when you do something like:
using innerHTML to insert <option> into a dropdown <select /> or insert <td> into a table row <tr/>