Panels sometimes disappear when their siblings are collapsed

[Mike M. Lin]

Using Ext JS 4.0.2, I put two panels inside of a container, making both of them collapsible. When I collapse the first, then the second, the first panel disappears (visually at least). Here's the markup and code to reproduce it.

<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-4.0.2/resources/css/ext-all.css">
<script type="text/javascript" src="http://extjs.cachefly.net/ext-4.0.2/ext-all-debug.js"></script>
<script type="text/javascript">
    Ext.onReady(function(){
        new Ext.Container({
            collapsible: true,
            items: [{
                title: 'Collapse me first...',
                collapsible: true
            }, {
                title: '...and then me (first panel will disappear)',
                collapsible: true
            }],
            renderTo: Ext.getBody()
        });
    });

</script>

The same problem does not occur on Ext JS 3.3.1.

Also, this only happens when the panels are in some kind of parent container. If the collapsible panels are appended directly to the document body, the problem does not occur.

Observations
- When a panel disappears, its top-level DOM element (<div id="panel-1015"...) has the style "width: 0;" applied directly to it.
- The header element (<div id="header-1018"...) has the same "width: 0;" style applied to it.
- Setting those widths back to the container width makes the panel reappear.

It looks like when we collapse a panel, it tells its parent container to "do layout", which in turn triggers the setting the width of its child panels. The problem occurs when one of those child panels was already collapsed. The reason is because of the how the child panel decides how wide it should be. It looks at the dimensions of its body. Since the body has the style "display: none;", its width is calculated as zero.

The bit of code I'm talking about is in the Ext.core.Element class:

getWidth: function(contentWidth, preciseWidth) {
    var me = this,
        dom = me.dom,
        ...
    } else if (Ext.supports.BoundingClientRect) {

        // display is none, so this is a 0 x 0 box!
        rect = dom.getBoundingClientRect();

        width = rect.right - rect.left;
        width = preciseWidth ? width : Math.ceil(width);

When recalculating the child panel width, should we be basing it off the width of its own body, which in this case is 0 (because of the "display: none;")?

Here's the stack trace at this point:

Ext.override.getWidth() at ext-all-debug.js:8468
Ext.define.calculateDockBoxes() at ext-all-debug.js:24636
Ext.define.dockItems() at ext-all-debug.js:24572
Ext.define.onLayout() at ext-all-debug.js:24560
Ext.define.layout() at ext-all-debug.js:15598
Ext.define.doComponentLayout() at ext-all-debug.js:20259
Ext.define.setCalculatedSize() at ext-all-debug.js:20220
Ext.define.setItemSize() at ext-all-debug.js:22044
Ext.define.onLayout() at ext-all-debug.js:27973
Ext.define.layout() at ext-all-debug.js:15598
Ext.define.doContainerLayout() at ext-all-debug.js:16016
Ext.define.afterLayout() at ext-all-debug.js:16029
Ext.define.layout() at ext-all-debug.js:15602
Ext.define.doComponentLayout() at ext-all-debug.js:20259
Ext.define.doOwnerCtLayouts() at ext-all-debug.js:15995
Ext.define.layout() at ext-all-debug.js:15608
Ext.define.doComponentLayout() at ext-all-debug.js:20259
Ext.define.setSize() at ext-all-debug.js:20155
Ext.define.setAttr() at ext-all-debug.js:23825
Ext.define.applyPendingAttrs() at ext-all-debug.js:33943
Ext.define.runAnim() at ext-all-debug.js:33909
Ext.define.each() at ext-all-debug.js:17285
Ext.define.runner() at ext-all-debug.js:33857
runTasks() at ext-all-debug.js:5744

Disclaimer: I may have totally misread it. This is the first time I'm digging into the Ext JS code.

[mike.estes]

Thanks for the report, I've pushed it into our issue tracker

[dkoudlo]

Same issue here. Does later (commercial) releases of Ext JS have this issue.

Could someone confirm?

Could this issue be related to the layout? any thoughts

[dkoudlo]

My company just got premium support with Sencha and while submitting a bug for this I ran into a solution.

Ext.onReady(function () {
    Ext.create('Ext.container.Container', {
        defaults: {
            collapsible: true,
            width: 400
        },
        items: [{
            title: 'Collapse me first...',
            html: 'Text 1'
        }, {
            title: '...and then me (first panel will disappear)',
            html: 'Text 2'
        }],
        renderTo: Ext.getBody()
    });
});

Could someone explain what is going on here?

[ana.cristina.ionescu]

Hi,

I am having the same issue when using ext 4.0.7. Can someone provide a solution for this ?
Thank you,
Ana

[stuchy]

I had this problem in another case with column layout and panels with height values.
The "solution" - if you can call it solution - was to simply add a width:100% to the child elements.
I dont know if this works in your case.

[...]

defaults: {
  collapsible: true,
  width: '100%'
},

[...] 

[vcw1989]

this could fix the problem, however, while expanding and collapsing the panels with fixed height and 'autoScroll', sometimes the 'anchor' does not work well--very right part may hide under the scroll bar. But not big deal, compared with the original 'nothing' problem...