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

问题描述

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

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

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

  Ext.define（'MyAccordion'，{
 extends：'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 ：'测试卷'，
布局：{
 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 thr ee'
}] 
}] 
}）; 
  

在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：[{ 
标题：'简介'，
工具：[{type：'gear'}，{type：'refresh'}]，
 html：'< p>这里是一些手风琴内容。点击下面的其他栏之一。< / p>'
}，{
 title：'Basic Content'，
 html：'< br />< ; BR />< p>更多内容。打开第三个面板以获得自定义的外观和样例。< / p>'，
项目：{
 xtype：'button'，
文本：'显示下一个面板'，
处理程序：function（）{
 Ext.getCmp（'acc-custom'）。 
} 
} 
}，{
 id：'acc-custom'，
标题：'Custom Panel Look and Feel'，
 cls：'自定义手风琴，//查看layout-browser.css来查看此类的CSS规则
 html：'< p>这里是一个简单的例子来完全自定义外观和感觉一个单独的面板，只需在配置中添加一个CSS类。< / p>'
}] 
}] 
}）; 
}）; 
  

更奇怪的是，如果我显示崩溃/展开工具，第一个面板的工具停止

解决方案

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

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

但这似乎真的很奇怪，因为为什么不应该有一个高度（或flex等）打破第一个容器的关闭？似乎很奇怪。

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

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.

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屋！