title: Placing toolbars in Border layout
body: <p>I am having difficulty placing a toolbar between two grids in a border layout.
  The window has a grid at the top of the window, a toolbar beneath that window, and a second collapsible grid at the bottom.</p>
  
  <p>When I docked it to the top panel, it either appeared at the bottom or top of the whole window. When I docked it to the top grid, it was cut off in the window unless you scrolled to it. When I set the toolbar to center, I have to scroll to it, and the entire grid stops rendering correctly.</p>
  
  <p>Does anyone know any best practices for making a toolbar appear between two grids in a border layout?</p>
  
  <pre><code>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);
  }
  });
  </code></pre>
  
  <p>Edit:
  Putting the toolbar as a dockedItem was the trick. Here was the transition from the first grid to the toolbar:</p>
  
  <pre><code>new MyProject.view.MyGrid({
                  region: 'north',
                  showParentLineItemDescription:      
         this.showParentLineItemDescription
              })
  ],
  dockedItems : [
      collapsible:'true',
      xtype: 'toolbar',
  </code></pre>