PDA

View Full Version : Ext.Element.createChild fails on tbody in IE



thomask42
10 Dec 2010, 8:37 AM
Ext version tested:

Ext 3.3.0


Adapter used:

ext


css used:

only default ext-all.css


Browser versions tested against:

IE6
IE8


Operating System:

WinXP Pro


Description:

Ext.Element.createChild() fails with an "unknown runtime error" when it is used on table elements in IE.


Test Case:



var body = Ext.getBody();

var table = body.createChild({
tag: 'div',
cls: this.cls,
children: [{
tag: 'table',
style: 'width:100%',
cellspacing: '0',
cellpadding: '0',
children: [{
tag: 'tbody'
}]
}]
});

var tableBody = table.child('tbody');

var tableRow = tableBody.createChild({
tag: 'tr',
children: [{
tag: 'td',
html: 'Hello World!'
}]
});


Steps to reproduce the problem:

Execute the test code in IE.


The result that was expected:

A table should be created.


The result that occurs instead:

I get a "Unknown runtime error"


Debugging already done:

It seems that Element.createChild() calls DomHelper.overwrite() which tries to set the innerHTML property of the element. This doesn't work because innerHTML is read-only for table elements in IE.

tryanDLS
10 Dec 2010, 8:39 AM
Doesn't IE require that you create a THEAD in that case before TBODY?

thomask42
10 Dec 2010, 8:47 AM
In the full code I have a thead and it doesn't make a difference. The fully DomHelper spec I use is:



{
tag: 'div',
cls: this.cls,
children: [{
tag: 'table',
style: 'width:100%',
cellspacing: '0',
cellpadding: '0',
children: [{
tag: 'thead',
cls: 'x-grid3-header',
children: [{
tag: 'tr',
cls: 'x-grid3-hd-row',
children: [{
tag: 'td',
cls: 'x-grid3-hd x-grid3-cell x-grid3-cell-first',
children: [{
tag: 'div',
cls: 'x-grid3-hd-inner',
html: ' '
}]
},{
tag: 'td',
cls: 'x-grid3-hd x-grid3-cell x-grid3-cell-last',
children: [{
tag: 'div',
cls: 'x-grid3-hd-inner',
html: ' '
}]
}]
}]
},{
tag: 'tbody'
}]
}]
}

Animal
11 Dec 2010, 11:33 PM
You appear to have seen why it won't work. innerHTML is read only for table elements in IE.

Try setting Ext.DomHelper.useDom = true

thomask42
15 Dec 2010, 7:29 AM
Setting Ext.DomHelper.useDom=true doesn't make a difference.

I fixed it by using the following code:


Ext.Element.prototype.createChild = function(config, insertBefore, returnDom) {
config = config || {tag:'div'};
return insertBefore ?
Ext.DomHelper.insertBefore(insertBefore, config, returnDom !== true) :
Ext.DomHelper[!this.dom.firstChild ? 'insertFirst' : 'append'](this.dom, config, returnDom !== true);
};