XTemplate for inserting table rows into a tbody only inserts a single row in IE

**gordonk66** · 7 Sep 2012 7:34 AM

REQUIRED INFORMATION

Ext version tested:

Ext 4.1.0

Browser versions tested against:

IE8
IE9

DOCTYPE tested against:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Description:

When a XTemplate is used to generate a list of tr elements to be attached to a tbody the result in IE is only a single row. The first tr element from the list is missing and any element beyond the 2nd in the list are not included.

Steps to reproduce the problem:

Just take a look at the fiddle provided. It clearly shows the issue when run in IE.

See this URL for live test case: http://jsfiddle.net/gordonk66/LaRKf/

Debugging already done:

The problem stems from the ieTable function in Ext.dom.Helper. Find my override in the next section. Here is the original code:

Code:

    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) {
           // !!! The reference to the first child is lost here when el is over-written. !!!
            el = document.createDocumentFragment();
            while (ns) {
                // !!! After you append ns to the el then it no longer has the nextSibling it did prior to the append. !!! 
                el.appendChild(ns);
                ns = ns.nextSibling;
            }
        }
        return el;
    },

Possible fix:

Override I used to fix the problem:

Code:

Ext.dom.Helper.override({    
ieTable: function(depth, openingTags, htmlContent, closingTags){
        var detachedDiv = document.createElement('div');
        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) {
            var tmp = el;
            el = document.createDocumentFragment();
            el.appendChild(tmp);


            while (ns) {
                tmp = ns.nextSibling;
                el.appendChild(ns);
                ns = tmp;
            }
        }
        return el;
    }
});

Operating System:

OSX ML

**mitchellsimoens** · 7 Sep 2012 11:01 AM

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

XTemplate for inserting table rows into a tbody only inserts a single row in IE

Thread Tools

Search Thread

Display

XTemplate for inserting table rows into a tbody only inserts a single row in IE

XTemplate for inserting table rows into a tbody only inserts a single row in IE

Tags for this Thread