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