You found a bug! We've classified it as EXTJSIII-120 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Apr 2013
    Posts
    1
    Vote Rating
    0
    yudindi is on a distinguished road

      0  

    Default IE 8: Initially hidden CompositeField inside a FormPanel get 0 height on display

    IE 8: Initially hidden CompositeField inside a FormPanel get 0 height on display


    REQUIRED INFORMATION




    Ext version tested:
    • Ext 3.4.0
    • Ext 3.4.1.1

    Browser versions tested against:
    • IE8 - doesn't work
    • Chrome 26.0.14 - works

    Description:
    • IE 8: Container (form layotu) nested in a FormPanel does not calculate correct height for a nested composite field but sets 0 height instead.

    Steps to reproduce the problem:
    • Create FormPanel {defaults: {hidden: true}} with a Container {layout:'form'} and a nested CompositeField with two fields
    • Show the form and change the visibility at runtime

    The result that was expected:
    • Composite field is visible with a correct height

    The result that occurs instead:
    • Composite field has 0 height

    Test Case:


    Code:
        <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type='text/javascript' src='http://cdn.sencha.io/ext-3.4.0/adapter/ext/ext-base.js'></script>
      <script type="text/javascript" src="http://cdn.sencha.io/ext-3.4.0/ext-all-debug.js"></script>
      <link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/ext-3.4.0/resources/css/ext-all.css">
    <script type='text/javascript'>//<![CDATA[ 
    Ext.onReady(function() {
    var simple = new Ext.FormPanel({
            labelWidth: 75,
            frame:true,
            title: 'Simple Form',
            bodyStyle:'padding:5px 5px 0',
            width: 350,
            defaults: {anchor: '90%', hidden: 'true'},
            defaultType: 'textfield',
    
    
            items: [{
                    fieldLabel: 'Outer One',
                }, {
                    xtype: 'container',
                    layout: 'form',
                    anchor: '100%',
                    items: [{
                        xtype: 'compositefield',
                        fieldLabel: 'Inner One',
                        anchor: '90%',
                        items: [{
                            xtype: 'textfield',
                            flex: 1
                        }, { 
                            xtype: 'button',
                            text: 'add'
                        }]
                    },{
                        xtype: 'textfield',
                        fieldLabel: 'Inner Two',
                        anchor: '90%'
                    }]
                }, { fieldLabel: 'Outer Two' }
            ],
    
    
            buttons: [{ text: 'CLICK',
                listeners: {
                    'click': function() { 
                        Ext.each(simple.items.items, function(item) { item.setVisible(true); }); 
                    }
                }
            }]
        });
    
    
        simple.render(document.body);
    });//]]>  
    </script>
    </head>
    <body></body></html>





    HELPFUL INFORMATION




    Screenshot or Video:
    Debugging already done:
    • Apparently, FormLayout does not call box.component.setSize() since calculated height is undefined and calculated width didn't change since last calculation. When calculating in Chrome the width does change couple of px, that causes box.component.setSize(), and consequent adjustmentPass on the FormLayout.

    Possible fix:
    • set the height manually on show

    Additional CSS used:
    • only default ext-all.css

    Operating System:
    • Win 7

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,217
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


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

Thread Participants: 1