EXTJS：如何在没有高度的空面板上的dockedItems之间添加空格

Question

我有一个使用dockedItems的边界封装的西部区域面板。此面板最初为空。如果我没有为此面板指定任何高度，则dockedItem将一个放在另一个下面。我希望面板使用整个可用高度，并将项目停靠在面板的顶部和底部。我怎么能这样做？

JSFiddle：https://jsfiddle.net/kavitaC/rtopn7fd/

Ext.define('MyForm', {
        extend: 'Ext.form.Panel',

        renderTo:Ext.getBody(),
        title: 'My Form',
           //height: 800,
        layout: 'fit',

        initComponent: function() {
            var me = this;

            Ext.applyIf(me, {
                dockedItems: [
                    {
                        xtype: 'toolbar',
                        dock: 'top',
                        items: [
                            {
                                xtype: 'filefield',
                                buttonOnly: true
                            }
                        ]
                    },
                    {
                        xtype: 'toolbar',
                        dock: 'bottom',
                        items: [
                            {
                                xtype: 'filefield',
                                buttonOnly: true
                            }
                        ]
                    }
                ]
            });

            me.callParent(arguments);
        }
    });

    Ext.application({
        name:'App',

        launch:function(){
            var form = Ext.create('MyForm');

        }
    });

Answer 1

默认情况下，面板不会占用完整的可用高度。您需要使用viewport来实现此目的。

参见示例：https://fiddle.sencha.com/#fiddle/s6h