How to fix the IE issue 'parentNode' is null or not an object with Ext.js3.1.1?

Question

I got this issue trying to destroy an Extjs 3.1.1 window on IE. The error says:

• On IE8: 'parentNode' is null or not an object
• On IE9: SCRIPT5007: Unable to get value of the property 'insertBefore': object is null or undefined ext-all-debug.js, line 5533 character 10

It works fine for other browsers.

The exceptions is raised on this method: Ext.element:insertAfter()

And the stack trace is similar to this closed thread

The component hierarchy looks like this (some components were extended):

window > panel > EditorGrid > FormPanel > Combobox

Answer 1

This patch fixed my issue. It just overrides the function adding checks for parentNode before calling its method. I added this code snippet to a fixes.js file that runs after Extjs.

Ext.override(Ext.Element, {

    /**
    * Inserts this element after the passed element in the DOM
    * @param {Mixed} el The element to insert after
    * @return {Ext.Element} this
    *
    * @overrides  to fix IE issue of "parentNode null or not an object".
    */
    insertAfter: function(el){
        el = Ext.getDom(el);
        if (el && el.parentNode) {
            el.parentNode.insertBefore(this.dom, el.nextSibling);
        }
        return this;
    }
});

Please note that ideally I should investigate why the element's parentNode is null, but this fix was good enough for me. Probably one of the extended element is destroying sub-items before the window is destroyed.