Question

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

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

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

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

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

Answer 1

令人惊讶但却是真的，但这是因为手风琴布局容器没有设置高度。

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

但这看起来很奇怪，因为为什么不应该让高度（或弹性等）打破关闭第一个容器？看起来很奇怪。

Answer 2

一个简单的解决方案是将_isLayoutRoot：true添加到带有手风琴布局的面板。

Ext.define('myAccordion',{
    extend: 'Ext.Panel',
    alias: 'widget.myAccordion',
    layout: 'accordion',
    _isLayoutRoot: true,
    items: myItems
});

示例：http://jsfiddle.net/38mx9hs9/1/

此问题似乎也已在4.2.2中修复： https://www.sencha.com/forum/showthread.php?267163-4-2-1-Accordion-Layout-in-Panel&p=1169533#post1169533

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

2 个答案: