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

Question

我在使用停靠项目的边界布局中有一个西区面板。该面板最初是空的。如果我没有为此面板指定任何高度，则 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