Threaded View

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-3443 in a recent build.
  1. #1
    Sencha User
    Join Date
    Jun 2011
    Posts
    3
    Vote Rating
    0
    Mike M. Lin is on a distinguished road

      0  

    Default Panels sometimes disappear when their siblings are collapsed

    Panels sometimes disappear when their siblings are collapsed


    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.

    Code:
    <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:

    Code:
    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:

    Code:
    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.
    Last edited by Mike M. Lin; 6 Jul 2011 at 4:56 PM. Reason: Added observations from examining the DOM and code