Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    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

  2. #2
    Sencha Premium Member vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Chisinau, Moldova
    Posts
    642
    Vote Rating
    25
    vadimv will become famous soon enough 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

  3. #3
    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..

  4. #4
    Sencha Premium Member vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Chisinau, Moldova
    Posts
    642
    Vote Rating
    25
    vadimv will become famous soon enough 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.

  5. #5
    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>

  6. #6
    Sencha Premium Member vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Chisinau, Moldova
    Posts
    642
    Vote Rating
    25
    vadimv will become famous soon enough vadimv will become famous soon enough

      0  

    Default


    could not replicate your words about my example, tested on chrome on Snow Leop. and Win7

  7. #7
    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.

Thread Participants: 1

Tags for this Thread