[4.1.2] TableLayout + IE8: calling doLayout after hidding an item causes a JS error

**Daniil** · 15 Oct 2012 8:16 AM

REQUIRED INFORMATION

Ext version tested:

Ext 4.1.2

Browser versions tested against:

IE8 - throws a JavaScript error
IE9 - OK
Chrome - OK
FireFox - OK

Description:

Working on some issue, I discovered that calling doLayout() for a container with TableLayout after hiding some item causes a JavaScript error in IE8. Generally, it is not required to call doLayout() in the example below (it is just a test case to reproduce), but, I think, it should not cause an error.

The error "tagName is null or not an object" occurs here:

Code:

ensureInDocument: function (el) {
    var dom = el.dom.parentNode;
    while (dom) {
        if (dom.tagName.toUpperCase() == 'BODY') {
            return;
        }
        dom = dom.parentNode;
    }

    Ext.getDetachedBody().appendChild(el);
}

Steps to reproduce the problem:

Run the sample in IE8 (it is reporducible in IE9 with IE8 mode as well)
Click the button

The result that was expected:

No error

The result that occurs instead:

A JavaScript error occurs

Test Case:

Code:

<html>
<head>
    <title>TableLayout hide item</title>

    <link type="text/css" rel="stylesheet" href="../resources/css/ext-all.css" />
    
    <script type="text/javascript" src="../ext-all-debug.js"></script>

    <script type="text/javascript">
        Ext.onReady(function () {
            Ext.create("Ext.container.Container", {
                renderTo: Ext.getBody(),
                layout: "table",
                items: [{
                    xtype: "button",
                    text: "Hide label",
                    handler: function () {
                        var ct = this.up("container");
                        ct.child("label").hide();
                        
                        ct.doLayout(); // actually, it is not required, but reproduces the issue.
                    }
                }, {
                    xtype: "label",
                    text: "Label"
                }]
            });
        });
    </script>
</head>
<body>

</body>
</html>

**mitchellsimoens** · 15 Oct 2012 8:58 AM

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

**gruszks** · 18 Dec 2012 4:24 AM

There is any quick fix for it?

**Daniil** · 18 Dec 2012 4:39 AM

Maybe this workaround. Actually, this is not a fix. I didn't investigate a root of the problem. But, at least, it allows to avoid an error.

Workaround

Code:

Ext.layout.container.Table.override({
    ensureInDocument: function(el){
        var dom = el.dom.parentNode;
        while (dom) {
            if (dom.tagName && dom.tagName.toUpperCase() == 'BODY') {
                return;
            }
            dom = dom.parentNode;
        } 
        
        Ext.getDetachedBody().appendChild(el);
    }
});

**gruszks** · 18 Dec 2012 5:07 AM

This is only workaround for silent the javascript error.
But the label isn't shown when you do something like this:

Code:

var label = Ext.ComponentQuery.query("label")[0];
label.show();
label.updateLayout();

**Daniil** · 18 Dec 2012 7:11 AM

Sadly. Maybe you could wrap the Label in an additional Container?

[4.1.2] TableLayout + IE8: calling doLayout after hidding an item causes a JS error

Thread Tools

Search Thread

Display

[4.1.2] TableLayout + IE8: calling doLayout after hidding an item causes a JS error

[4.1.2] TableLayout + IE8: calling doLayout after hidding an item causes a JS error