为什么 ExtJS 4.2.1 手风琴布局的第一个面板永远不会关闭? [英] Why does the first panel of ExtJS 4.2.1 accordion layout never close?

问题描述

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

I have an ExtJS 4.2.1 accordion layout with three panels.

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

When the app is first launched, the first panel is open and the 2nd/3rd are closed.

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

I can open and close the 2nd and 3rd, but I can never close the first panel.

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 示例布局浏览器示例的以下代码中，如果您在启动应用程序后做的第一件事是单击第一个标题，它会关闭，但随后重新打开它并且永远不会再次关闭:

In the following code leveraged from the 4.2.1 examples layout browser example, if the first thing you do after launching the app is click the first header, is does close, but then re-open it and it never closes again:

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>'
            }]
        }]
    });
});

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

Even more strange, if I do show the collapse/expand tool, the tool for the first panel stops working.

推荐答案

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

Amazing but true, but this happens because the accordion layout container does not have a height set.

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

Because I can't have a fixed height, this fixes the issue: flex: 1

但这看起来真的很奇怪，因为为什么不应该有一个高度(或弯曲等)来关闭第一个容器?只是看起来很奇怪.

But this seems really strange, because why should not having a height (or flex, etc) break closing the first container? Just seems weird.

这篇关于为什么 ExtJS 4.2.1 手风琴布局的第一个面板永远不会关闭?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！