[2.0a1][SOLVED] IE complains about invalid arguments for [Native DOM].insertBefore() [Archive]

UselessPickles

2 Oct 2007, 7:04 AM

Internet Explorer throws an exception when no target node is specified in a call to the insertBefore() method of a native DOM object (other browsers just append the new node at the end in this case). The one place I encountered this was in Ext.layout.ContainerLayout.prototype.renderItem. For a quick fix, I simply replaced the following line:

target.dom.insertBefore(c.getEl().dom, position);

with:

if (position) {
target.dom.insertBefore(c.getEl().dom, position);
} else {
target.dom.appendChild(c.getEl().dom);
}

This is the only occurrence of the problem that I know about, but it may exist in other places as well.

~Jeff

mystix

2 Oct 2007, 8:06 AM

here's my test case, tested with FF2.0.0.7 / IE6.

<html>
<head>
<title>Test insertBefore()</title>
<link rel='stylesheet' href='ext-all.css'>
<script src='ext-base.js'></script>
<script src='ext-all-debug.js'></script>
<script>
Ext.onReady(function() {
//*
Ext.get('div1').dom.insertBefore(Ext.get('date1').dom); // no error in IE6, error in FF2.0.0.7
/*/
Ext.get('div1').dom.insertBefore(Ext.get('date1').dom, null); // no error in both IE6 / FF2.0.0.7
//*/
});
</script>
</head>
<body>

<div id='div1'></div>
<input type='text' id='date1'/>
<input type='text' id='date2'/>

</body>
</html>

i.e. there's no bug and your code isn't necessary.

provagino

3 Oct 2007, 5:37 AM

I have the same error.

IE7
Insert TabPanel inside Panel with layout 'Card'

mystix

3 Oct 2007, 7:36 AM

I have the same error.

IE7
Insert TabPanel inside Panel with layout 'Card'

as per 13985, please post more details + a test case.

[edit]
p.s. have you tried the code i posted in IE7?

UselessPickles

3 Oct 2007, 11:20 AM

here's my test case, tested with FF2.0.0.7 / IE6.

<html>
<head>
<title>Test insertBefore()</title>
<link rel='stylesheet' href='ext-all.css'>
<script src='ext-base.js'></script>
<script src='ext-all-debug.js'></script>
<script>
Ext.onReady(function() {
//*
Ext.get('div1').dom.insertBefore(Ext.get('date1').dom); // no error in IE6, error in FF2.0.0.7
/*/
Ext.get('div1').dom.insertBefore(Ext.get('date1').dom, null); // no error in both IE6 / FF2.0.0.7
//*/
});
</script>
</head>
<body>

<div id='div1'></div>
<input type='text' id='date1'/>
<input type='text' id='date2'/>

</body>
</html>

i.e. there's no bug and your code isn't necessary.

Try undefined rather than null; IE doesn't like it, and that's the value that is used in the code I referenced under certain conditions.

mystix

3 Oct 2007, 8:40 PM

verified.

instead of modifying the source directly, use this override instead

Ext.override(Ext.layout.ContainerLayout, {
renderItem : function(c, position, target) {
if (c && !c.rendered) {
if(this.extraCls) {
c.addClass(this.extraCls);
}
c.render(target, position);
if (this.renderHidden && c != this.activeItem) {
c.hide();
}
} else if(c && !this.isValidParent(c, target)) {
if(this.extraCls){
c.addClass(this.extraCls);
}
if(typeof position == 'number'){
position = target.dom.childNodes[position] || null;
}
target.dom.insertBefore(c.getEl().dom, position || null);
if (this.renderHidden && c != this.activeItem) {
c.hide();
}
}
}
});

jack.slocum

4 Oct 2007, 1:52 AM

Thanks. Updated in SVN.