IE10 Extjs 4.1.0 insertSibling doesnt work correctly

Question

I have a following piece of code:

        var messageWrapper = {
            tag: 'div'
        };

        var messageEl = cmp.errorEl.insertSibling(messageWrapper, "after");
        cmp.messageEl = messageEl;

        Ext.Array.each(me.displayProperties, function (property) {
            var propertyConfig = {
                tag: 'div',
                style: {
                    display: 'none'
                }
            };
            var newElement = messageEl.insertSibling(propertyConfig, "after");
            newElement.addCls(property.classes);

            var changeListener = me.buildChangeListener(newElement, property.name);
            cmp.addListener('change', changeListener);
        });

which used to work fine under ExtJs 4.0.7, and still works fine under chrome.

The problem is that cmp.errorEl.insertSibling(messageWrapper, "after") returns null under IE, I could add additional true parameter - then I would receive dom object, but I wouldn't be able to use extjs features.

Do you have any idea how I could fix it?

The fiddle is available at: https://fiddle.sencha.com/#fiddle/f1a

Answer 1

There is a bug in the Ext.dom.Helper (ietable method) of the ExtJS 4.1.0 framework. Apply this override to fix it:

(function() {

// kill repeat to save bytes
var detachedDiv = document.createElement('div');

    Ext.define('Ext.override.dom.Helper', {
        override: 'Ext.dom.AbstractHelper',

        ieTable: function(depth, openingTags, htmlContent, closingTags){
            detachedDiv.innerHTML = [openingTags, htmlContent, closingTags].join('');

            var i = -1,
                el = detachedDiv,
                ns;
            while (++i < depth) {
                el = el.firstChild;
            }
            // If the result is multiple siblings, then encapsulate them into one fragment.
            ns = el.nextSibling;

            if (ns) {
                el = document.createDocumentFragment();
                while (ns) {
                    el.appendChild(ns);
                    ns = ns.nextSibling;
                }
            }
            return el;
        }

    }, function() {
        Ext.ns('Ext.core');
        Ext.DomHelper = Ext.core.DomHelper = new this;
    });

}());

Fiddle: https://fiddle.sencha.com/#fiddle/f1v