在Border布局中放置工具栏

Question

我很难在边框布局中的两个网格之间放置工具栏。 窗口顶部有一个网格，窗口下方有一个工具栏，底部有第二个可折叠网格。

当我将它停靠在顶部面板上时，它会出现在整个窗口的底部或顶部。当我将它停靠在顶部网格时，它会在窗口中被切断，除非你滚动到它。当我将工具栏设置为居中时，我必须滚动到它，整个网格停止正确渲染。

有没有人知道在边框布局中两个网格之间出现工具栏的最佳做法？

Ext.define('MyProject.view.MyForm', {
extend: 'Ext.form.Panel',
xtype: 'dataInputForm',

layout:'border',
defaults: {
    collapsible: true,
    split: true,
    bodyStyle: 'padding:0px'
},
listeners: {
    show: function (grid, options) {
    }
},
requires: [
    'MyProject.view.MyGrid'
],
initComponent: function () {
  // some logic goes here for determining what buttons should be disabled,     
  // so toolbar buttons must be declared in initComponent.
   this.items = [
        {
            region:'north',
            collapsible: false,
            items: [
                new MyProject.view.MyGrid({
                    region: 'north',
                    showParentLineItemDescription: this.showParentLineItemDescription
                })]
        },
            {
        region:'center',
        collapsible:'false',
        xtype: 'toolbar',
        ui: 'footer',
        enableOverflow: true,
        items: [
            { xtype: 'tbspacer' },
            {
                xtype: 'button',
                text: 'FirstButton',
                id: 'firstButton'
            },
            {
                xtype: 'tbspacer'
            },
            {
                xtype: 'button',
                text: 'Second Button',
                id: 'secondButton'

            }
    },//end toolbar
    {
            title: 'Collapsible Grid',
                    xtype: 'collapsibleGrid',
                    region: 'south',                
                  collapsible: true
        }
]//end items
 this.callParent(arguments);
}
});

编辑： 将工具栏设置为dockedItem就是诀窍。这是从第一个网格到工具栏的过渡：

new MyProject.view.MyGrid({
                region: 'north',
                showParentLineItemDescription:      
       this.showParentLineItemDescription
            })
],
dockedItems : [
    collapsible:'true',
    xtype: 'toolbar',