Ext version tested:
  • Ext 3.3.1

Browser versions tested against:
  • IE7 (not working)
  • IE8 (is working)
  • FF3 (is working)

Operating System:
  • Windows 7

Description:
  • Last panel that has compositefield is not shown in IE7 if container has autoScroll: true, and has lot of items above.

Test Case:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Hello World Window Example</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext-all.js"></script>
	
	<script type="text/javascript">
    Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';

Ext.onReady(function() {
    function getTexFields(n){
        var fields = [];
        for(var i = 0; i < n; i++){
            fields.push(new Ext.form.TextField({fieldLabel: 'TextField-'+i}));
        }
        return fields;
    }

    function getAdvancedItem(title){
        return {
            title: title,
            items: [
                {
                    xtype: 'compositefield',
                    fieldLabel: 'compositefield',
                    name: 'type',
                    items: [
                        new Ext.form.TextField({width: 50}),
                        new Ext.form.TextField({width: 50})
                    ]
                },
                new Ext.form.TextField({fieldLabel: 'TextField'})
            ]
        }
    }

    var tab = new Ext.TabPanel({
        activeItem: 0,
        items: [{
            title: 'Settings',
            cls: 'x-panel-mc',
            padding: 25,
            html: 'click on General tab and scroll down.'
        },
        new Ext.form.FormPanel({
            title: 'General',
            autoScroll: true,
            cls: 'x-panel-mc', // for background color (like frame)
            style: 'padding-top: 0;',
            defaults: {
                padding: 25,
                border: false,
                xtype: 'panel',
                layout: 'form'
            },
            items: [
                {
                    title:'panel1',
                    // if add 1-4 items panel3 will be also visible on render
                    // because panel3 will render in not visible space (scroll)
                    //
                    // if add more than 10 items and panel 2 is rendered in not visible space
                    // panel 2 is rendered OK, but panel3 (last) not
                    items: getTexFields(10)
                },
                getAdvancedItem('panel2 - <span style="color: green;">visible</span>'),
                getAdvancedItem('panel2 - <span style="color: green;">visible</span>'),
                getAdvancedItem('panel2 - <span style="color: green;">visible</span>'),
                getAdvancedItem('panel2 - <span style="color: green;">visible</span>'),
                getAdvancedItem('panel2 - <span style="color: green;">visible</span>'),

                // last panel is always not OK
                getAdvancedItem('panel3 - <span style="color: red;">not visible</span>')

                //,{
                //	html: 'if add this panel, panel3 will be visible on render'
                //}

                //,{
                //	xtype: 'box',
                //	html: 'if add this box, panel3 will not be visible on render'
                //}
            ]
        })
        ]
    });
    var w = new Ext.Window({
        title: 'Window',
        layout: 'fit',
        width: 450,
        height: 350,
        border: false,
        items: [
            tab
        ]
    });
    w.show();
});
	</script>
</head>
<body>

</body>
</html>
Steps to reproduce the problem:
  • run the code
  • select second tab (General)
  • scroll down and see if panel3 is visible - in IE7 is not
  • if move window, or try to resize content of panel3 will be then visible

The result that was expected:
  • panel3 should have same items as panel2


Screenshot:
ie7 last form.jpg