Ext.dom.Element replaceWith throw exception

**Francois Lecroart** · 31 Oct 2012 8:08 AM

Ext version tested:

Ext 4.1.2.1

Browser versions tested against:

IE10 (in navigator mode: 7, 8, 9, 10
FF 16.0.2 (firebug 1.10.5 installed)

DOCTYPE tested against:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Description:

when call replaceWith on an element. the browser throw an excepetion (depend of the browser)

Steps to reproduce the problem:

load the exemple page

The result that was expected:

no error in the javascript console

The result that occurs instead:

an error
ie : DOM Exception: HIERARCHY_REQUEST_ERR (3)
NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMHTMLDivElement.insertBefore]<br>ext-all-dev.js<br>Line 19567

Test Case:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>Title</title>

<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../libs/ext-4.1.2.1/resources/css/ext-all.css" /> 


<!-- ** Javascript ** -->  
<!-- base library -->
<script type="text/javascript" src="../libs/ext-4.1.2.1/ext-all-dev.js"></script>

<!-- page specific --> 

<!-- overrides to base library -->  
<script type="text/javascript">
/** patch * /
Ext.define('Ext.dom.AbstractElement-fix-replaceWith', {
        override: 'Ext.dom.AbstractElement',
        replaceWith: function (el) {
            var
            me = this;

            if(el.nodeType || el.dom || typeof el == 'string'){
                el = Ext.getDom(el);
                me.dom.parentNode.insertBefore(el, me.dom);
            }else{
                el = Ext.core.DomHelper.insertBefore(me.dom, el);
            }

            Ext.removeNode(me.dom);
            delete Ext.cache[me.id];
            me.id = Ext.id(me.dom = el);
            Ext.dom.AbstractElement.addToCache(me.isFlyweight ? new Ext.dom.AbstractElement(me.dom) : me);
            return me;
        }
    });
/* */
</script>
<script type="text/javascript">
    Ext.BLANK_IMAGE_URL = '../libs/ext-4.1.2.1/resources/images/default/s.gif';


    Ext.onReady(function() {
            Ext.get("world").replaceWith("sencha");
    }); //end onReady
</script>
</head>  
<body>
    <div>test:<br >
        <div id="sencha">Sencha</div>
        <div>hello <div id="world">world</div></div>
    </div>
</body>  
</html>

un-comment fix to see the workaround in action

Debugging already done:

The error come from the call of me.dom.parentNode.insertBefore the first param given is an Ext.domElement and not a dom object.

Possible fix:

commented in the exemple

Operating System:

Archlinux

**kevin.chen** · 31 Oct 2012 12:46 PM

tested in ExtJs 4.1.0, ExtJs 4.1.1, ExtJs 4.1.2, ExtJs 4.1.3, issue exists in all of these versions.

**kevin.chen** · 31 Oct 2012 12:47 PM

Thanks for the report! I have opened a bug in our bug tracker.

**Francois Lecroart** · 5 Nov 2012 12:24 AM

thank you

Ext.dom.Element replaceWith throw exception

Thread Tools

Search Thread

Display

Ext.dom.Element replaceWith throw exception

Ext.dom.Element replaceWith throw exception