title: ExtJS: grid 100% height
body: <p>I have a structure of this type (Ext 3.3.1):</p>
  
  <pre><code>var page = new Ext.Viewport({
      layout: 'border',
      anchor:'100% 100%',
      renderTo: Ext.getBody(),
      items: [{
          region: 'north',
          height:'auto',
          items: [toolbar]
      },{
          region: 'center',
          layout:'fit',
          items: [gridCourses,gridExams]
      }]
  });
  </code></pre>
  
  <p>In the toolbar, I have two buttons, COURSES and EXAMS. I use these buttons to show/hide one of the two grid, so that only one is visible at a time. The code of the buttons I uses is something like this:</p>
  
  <pre><code>{
      text: 'Courses',
      iconCls: 'show-courses',
      handler: function(){
          gridCourses.store.reload();
          gridCourses.show();
          gridExams.hide();
      }
  },{
      text: 'Exams',
      iconCls: 'show-exams',
      handler: function(){
          gridExams.store.reload();
          gridCourses.hide();
          gridExams.show();
      }
  }
  </code></pre>
  
  <p>The question is: how can I have the the displayed grid to fill the whole screen (especially in height?). I think I have to put something in the handler of the buttons or a listener to my grids, but I do not know what to put. Any hints?</p>