title: Autohide a viewport's region in Extjs
body: <p>Lets suppose i have the following code snippet:</p>
  
  <pre><code>Ext.create('Ext.container.Viewport', {
  layout: 'border',
  renderTo: Ext.getBody(),
  items: [{
      region: 'north',
      html: '&lt;h1 class="x-panel-header"&gt;Page Title&lt;/h1&gt;',
      autoHeight: true,
      border: false,
      margins: '0 0 5 0'
  }, {
      region: 'west',
      collapsible: true,
      title: 'Navigation',
      width: 150
      // could use a TreePanel or AccordionLayout for navigational items
  }, {
      region: 'south',
      title: 'South Panel',
      collapsible: true,
      html: 'Information goes here',
      split: true,
      height: 100,
      minHeight: 100
  }, {
      region: 'east',
      title: 'East Panel',
      collapsible: true,
      split: true,
      width: 150
  }, {
      region: 'center',
      xtype: 'tabpanel', // TabPanel itself has no title
      activeTab: 0,      // First tab active by default
      items: {
          title: 'Default Tab',
          html: 'The first tab\'s content. Others may be added dynamically'
      }
  }]
  });
  </code></pre>
  
  <p>What i want to do is to have the north toolbar to be hidden automatically when the mouse is moved away from the north region and unhidden when the mouse is hovered on north region(exactly like autohide in windows start menu)</p>