title: Panel not hiding properly
body: <p>I have a panel whose items are a list and a panel like below</p>
  
  <p><img src="https://i.stack.imgur.com/cGtQm.png" alt="enter image description here"></p>
  
  <p>When I click on a button, I want to hide this panel. So far, I managed to do that, but this is what I get</p>
  
  <p><img src="https://i.stack.imgur.com/Wx1WL.png" alt="enter image description here"></p>
  
  <p>I would like to know how to remove this grey space form the bottom of the panel.</p>
  
  <p>I already this but it's not working :</p>
  
  <pre><code>this.toolsPnl.hide({type:'slide', direction:'up'});
  this.doComponentLayout();
  this.doLayout();
  </code></pre>
  
  <p><strong>Update : Code</strong></p>
  
  <pre><code>this.pasteBtn = new Ext.Button({
      cls:'paste-copy-tools-panel',
      text: 'Coller',
      ui: 'normal',
      handler : this.onPasteBtnTap,
      scope:this
  });
  
  this.cancelBtn = new Ext.Button({
      cls:'cancel-copy-tools-panel',
      text: 'Annuler',
      ui: 'normal',
      handler: this.onCancelBtnTap,
      scope:this
  });
  
  this.toolsPnl = new Ext.Panel({
      layout:{type:'hbox', align:'stretch'},
      height:40,
      cls:'document-tools-panel',
      hidden:true,
      items:[this.pasteBtn,this.cancelBtn]
  });
  
  this.currentFolderPnl = new Ext.Panel({
      cls:'document-current-folder-panel',
      html:'/'
  });
  
  this.list = new Ext.List({
      flex:1,
      cls:'document-list',
      id: 'document-list',
      store: app.stores.Document,
      itemTpl: app.templates.document
  });
  
  app.views.DocumentList.superclass.constructor.call(this, {
      selectedCls : "x-item-selected",
      dockedItems: [{
          xtype: 'toolbar',
          ui:'dark',
          title: 'Documents',
          items:[this.backBtn,{xtype:'spacer'},this.newBtn]
      }],
      layout: 'vbox',
      items: [
          this.currentFolderPnl,
          this.list,
          this.toolsPnl,
      ]
  });
  </code></pre>