为什么 ExtJS 4.2.1 手风琴布局的第一个面板永远不会关闭？

我有一个带有三个面板的 ExtJS 4.2.1 手风琴布局。

当应用程序首次启动时，第一个面板打开，第二个/第三个面板关闭。

我可以打开和关闭第二个和第三个面板，但我永远无法关闭第一个面板。

Ext.define('MyAccordion', {
    extend: 'Ext.container.Container',
    alias: 'widget.myAccordion',
    padding: 0,
    margin: 0,
    width: 200,    

    layout: {
        type: 'accordion',
        align: 'stretch',
        animate: true,
        hideCollapseTool: true
    },


    items: [{
        xtype: 'panel',
        title: 'Test Volumes',
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            xtype: 'label',
            text: 'volume one'
        },{
            xtype: 'label',
            text: 'volume two'
        },{
            xtype: 'label',
            text: 'volume three'
        }]
    }, {
        xtype: 'panel',
        title: 'Production Volumes',
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            xtype: 'label',
            text: 'volume one'
        },{
            xtype: 'label',
            text: 'volume two'
        },{
            xtype: 'label',
            text: 'volume three'
        }]
    }, {
        xtype: 'panel',
        title: 'Extra Volumes',
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            xtype: 'label',
            text: 'volume one'
        },{
            xtype: 'label',
            text: 'volume two'
        },{
            xtype: 'label',
            text: 'volume three'
        }]
    }]
});

在以下来自 4.2.1 示例布局浏览器示例的代码中，如果启动应用程序后所做的第一件事是单击第一个标头，则它会关闭，但随后重新打开它，并且它永远不会再次关闭：

Ext.onReady(function() {
    Ext.create('Ext.container.Viewport', {
        renderTo: Ext.getBody(),
        items: [{
            xtype: 'panel',
            title: 'Accordion Layout',
            layout: 'accordion',
            defaults: {bodyStyle: 'padding:15px'},
            items: [{
                title: 'Introduction',
                tools: [{type:'gear'},{type:'refresh'}],
                html: '<p>Here is some accordion content.  Click on one of the other bars below for more.</p>'
            },{
                title: 'Basic Content',
                html: '<br /><br /><p>More content.  Open the third panel for a customized look and feel example.</p>',
                items: {
                    xtype: 'button',
                    text: 'Show Next Panel',
                    handler: function(){
                        Ext.getCmp('acc-custom').expand(true);
                    }
                }
            },{
                id: 'acc-custom',
                title: 'Custom Panel Look and Feel',
                cls: 'custom-accordion', // look in layout-browser.css to see the CSS rules for this class
                html: '<p>Here is an example of how easy it is to completely customize the look and feel of an individual panel simply by adding a CSS class in the config.</p>'
            }]
        }]
    });
});

更奇怪的是，如果我确实显示折叠/展开工具，第一个面板的工具就会停止工作。

令人惊奇但却是事实，但发生这种情况是因为手风琴布局容器没有设置高度。

因为我不能有固定的高度，所以这解决了问题：flex: 1

但这看起来真的很奇怪，因为为什么高度（或弯曲等）不应该破坏第一个容器的关闭？只是看起来很奇怪。