Thank you for reporting this bug. We will make it our priority to review this report.
  1. 13 Mar 2012 4:05 AM #1
    mastak
    mastak is offline
    Sencha User mastak's Avatar
    Join Date
    Jul 2011
    Location
    Ukraine
    Posts
    17
    Vote Rating
    0
    mastak is on a distinguished road
      0  

    Exclamation Ext.panel.Panel disappears on 'collapse' !

    Ext.panel.Panel disappears on 'collapse' !


    REQUIRED INFORMATIONExt version tested:
    • Ext 4.0.7
    Browser versions tested against:
    • IE9
    • Chrome
    DOCTYPE tested against:
    • doesn't matter
    Description:
    • Panel disappears after collapse.
    Steps to reproduce the problem:Screenshots:

    Loaded controls:    Panel_first.png


    After 'My Panel 2' collapsed.    Panel_second.png


    How it should look when fixed.    Panel_third.png

    Source code:

    http://jsfiddle.net/mastak/ArPEt/1/


    HELPFUL INFORMATION

    Screenshot or Video:
    • see above

    Possible fix:
    • getBoundingClientRect() returns empty ClientRect if element not displayed ( style="display: none" ) :
    • ClientRect
      • bottom: 0
      • height: 0
      • left: 0
      • right: 0
      • top: 0
      • width: 0
    Don't use getBoundingClientRect() or set 'display: none' after getBoundingClientRect() call.

    Operating System:
    • Win7
    Reply With Quote Reply With Quote
  2. 13 Mar 2012 7:43 AM #2
    vadimv
    vadimv is offline
    Sencha User vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Chisinau, Moldova
    Posts
    520
    Vote Rating
    9
    vadimv will become famous soon enough
      0  

    Default


    didn't make an investigation on this, because of no free time but could be related: http://www.sencha.com/forum/showthre...ayout-elements
    Reply With Quote Reply With Quote
  3. 13 Mar 2012 7:58 AM #3
    mastak
    mastak is offline
    Sencha User mastak's Avatar
    Join Date
    Jul 2011
    Location
    Ukraine
    Posts
    17
    Vote Rating
    0
    mastak is on a distinguished road
      0  

    Lightbulb


    Thx for answer..

    Hard to make some reference to your example, because your one doesn't render properly:

    panel_render_example.png

    I have provided source code and live example in my 'defect' description with possible solution to fix.. plz look if you have time..
    Reply With Quote Reply With Quote
  4. 13 Mar 2012 12:22 PM #4
    vadimv
    vadimv is offline
    Sencha User vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Chisinau, Moldova
    Posts
    520
    Vote Rating
    9
    vadimv will become famous soon enough
      0  

    Default


    may be because of jsfiddle(I already tested a few examples on it, and every time renders in its way, not how should be, there's sth wrong with it), I would recommend you verify your tests with the browser directly, and the exemple provided by me is from docs, you can test even there.
    Reply With Quote Reply With Quote
  5. 14 Mar 2012 1:04 AM #5
    mastak
    mastak is offline
    Sencha User mastak's Avatar
    Join Date
    Jul 2011
    Location
    Ukraine
    Posts
    17
    Vote Rating
    0
    mastak is on a distinguished road
      0  

    Post


    this screenshot made from my test ( Chrome ), not from jsfiddle. Here is source code ( Extjs v4.0.7 ):

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
</head>
<body>
    <script type="text/javascript">
        Ext.create('Ext.Panel', {
            width: 500,
            height: 300,
            title: "HBoxLayout Panel",
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            renderTo: document.body,
            items: [{
                xtype: 'panel',
                title: 'Inner Panel One',
                flex: 2,
                collapsible: true,
                collapseDirection: 'left'
            }, {
                xtype: 'panel',
                title: 'Inner Panel Two',
                flex: 1
            }, {
                xtype: 'panel',
                title: 'Inner Panel Three',
                flex: 1
            }]
        });
    </script>
</body>
</html>
    Reply With Quote Reply With Quote
  6. 14 Mar 2012 2:35 AM #6
    vadimv
    vadimv is offline
    Sencha User vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Chisinau, Moldova
    Posts
    520
    Vote Rating
    9
    vadimv will become famous soon enough
      0  

    Default


    could not replicate your words about my example, tested on chrome on Snow Leop. and Win7
    Reply With Quote Reply With Quote
  7. 14 Mar 2012 3:23 AM #7
    mastak
    mastak is offline
    Sencha User mastak's Avatar
    Join Date
    Jul 2011
    Location
    Ukraine
    Posts
    17
    Vote Rating
    0
    mastak is on a distinguished road
      0  

    Default


    I have tested on Win7.. Same if I use IE ( just verified ) .. well.. I have provided my source code ( see above, not jsfiddle version ), so you can try it.. but plz pay attention on Extjs version. I use v4.0.7.

    If it could help for solving/fixing issue.. I can setup real testing example on the web.
    Reply With Quote Reply With Quote