REQUIRED INFORMATION

Ext version tested:
  • Ext 4.1.1
Browser versions tested against:
  • Chrome 19
  • FF 13
  • IE9
Description:
  • An undesired horizontal GridPanel scrollbar appears when that GridPanel is defined within the item of Accordion. Please run the sample or just look at the screenshot. Without the According the GridPanel is rendered without the scrollbar.
Steps to reproduce the problem:
  • Just run the sample
The result that was expected:
  • No scrollbars for the GridPanel
The result that occurs instead:
  • A horizontal scrollbar appears.
Test Case:

Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Accordion GridPanel Bug</title>

    <link type="text/css" rel="stylesheet" href="../resources/css/ext-all.css" />
    
    <script type="text/javascript" src="../ext-all.js"></script>

    <script type="text/javascript">
        Ext.onReady(function () {
            Ext.create("Ext.panel.Panel", {
                renderTo: Ext.getBody(),
                height: 400,                
                width: 400,
                layout: "accordion", // if comment that out, the scrollbar disappears.
                items: [{
                    title: "Accordion 1",
                    collapsed: true
                }, {
                    title: "Accordion  2",
                    collapsed: false,
                    items: [{
                        xtype: "grid",
                        height: 300,
                        width: 300,
                        columns: {
                            items: [{
                                flex: 1,
                                text: "Column 1"
                            }]
                        }
                    }]
                }]                
            });
        });
    </script>
</head>
<body>

</body>
</html>


HELPFUL INFORMATION


Screenshot:


1.JPG