如何调整每个 Accordion Panel 的高度

Question

我有以下手风琴布局。每个面板占据容器的整个高度。有什么办法可以将子面板的高度限制为面板必须显示的任何内容？我尝试了 fill: false ，但没​​有奏效。

Ext.define('T.view.Test', {
    id: 'Test',
    extend: 'Ext.Panel',
    alias: 'widget.Test',
    title: 'PANEL CONTAINER',
    layout: {
        type: 'accordion',
        align: 'stretch',
        pack: 'start',
        fill: false
    },
    height: 300,
    initComponent: function () {
        Ext.apply(this, {
            items: [{
                xtype: 'panel',
                flex: 1,
                title: 'panel1',
                html: 'this is first panel'
            }, {
                xtype: 'panel',
                title: 'panel2',
                flex: 1,
                html: 'this is the next panel'
            },{
                xtype: 'panel',
                title: 'panel3',
                flex: 1,
                html: 'this is the 3rd panel'
            }]
        });
        this.callParent(arguments);
    }
});

Ext.create('T.view.Test', {
    renderTo: Ext.getBody()
});

JSFiddle：https://jsfiddle.net/kavitaC/2c52aby4/1/

Answer 1

fill: false 不起作用，因为面板有 flex: 1。只需从所有面板中删除 flex 即可！