javascript - vbox中的Ext js 4.2手风琴布局

Question

具有手风琴布局的面板与另一个项目一起包含在 vbox 中。

我有两个烦恼：

1. 当我尝试使用手风琴布局将 flex 设置为面板时，会导致错误“[E] 布局运行失败”
2. 当通过 constand 固定高度时，它不会按预期工作：第一个面板不会折叠。

这是代码示例：

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”使用布局“锚”？试试这样？

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/例如，它工作正常。