vbox中的Ext js 4.2手風琴布局

Question

具有手風琴布局的面板包含在vbox中，另外一項。

我有兩個麻煩：

1. 當我嘗試將flex設置為具有手風琴布局的面板時，會導致錯誤“ [E]布局運行失敗”
2. 當通過固定來固定高度時，它無法按預期方式工作：第一個面板不會折疊。

這是代碼示例：

Ext.create('Ext.panel.Panel', {
    title: 'Accordion Layout',
    width: 300,
    height: 500,
    layout: 'vbox',
    items: [{
        xtype: 'datefield'
    }, {
        defaults: {
            // applied to each contained panel
            bodyStyle: 'padding:15px'
        },
        layout: {
            // layout-specific configs go here
            type: 'accordion',
            titleCollapse: true,
            animate: true
        },
        items: [{
            title: 'Panel 1',
            html: 'Panel content 1!'
        }, {
            title: 'Panel 2',
            html: 'Panel content 2!'
        }, {
            title: 'Panel 3',
            html: 'Panel content 3!'
        }],
    }],
    renderTo: Ext.getBody()
});

http://jsfiddle.net/6DHM4/1/

Answer 1

我無法重現您的錯誤，但是使用flex: 1看起來對我來說很不錯，如果我將layout: 'vbox'更改為

layout: {
   type: 'vbox',
   align: 'stretch'
}

（請參閱此小提琴 ）

Answer 2

可能正確的方法是對“ vbox”使用布局“ anchor”嗎？ 那樣嘗試嗎？

Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: 300,
height: 500,    
layout: 'anchor',
items: [
            {xtype: 'datefield'},
            {
             defaults: {
               // applied to each contained panel
               bodyStyle: 'padding:15px'
               ,anchor: '100%'
             },

    ...

我不知道為什么，但是當我在jsfiddle.net上對其進行測試時，它顯示錯誤：“第一個面板不會折疊”。 但是，例如，如果我在http://try.sencha.com/上對其進行測試，則可以正常工作。