title: ExtJS make grid to be 100% height
body: <p>i found 2 similar questions here, but they are not helped me, my code is:</p>
  
  <pre><code>var grid = Ext.create('Ext.grid.Panel', {
      autoScroll: true,
      // if set this to any numeric value, then everything works just good, but 
      // i was hoping that `ExtJS` already can detect browser window height, am i wrong ?
      height: '100%', 
      title: 'Products',
      store: store,
      itemId: 'product_grid',
      columns: [.. columns skipped ...],
      plugins: [ rowEditing ],
      dockedItems: [ ..addRow button here..]
  });
  var panel = Ext.create('Ext.panel.Panel', {
      autoScroll: true,
      items: [
      {
          xtype: 'productGrid'
      }
      ]
  });
  Ext.create('Ext.container.Viewport', {
      layout: 'fit',
      items: panel
  });
  </code></pre>
  
  <p>What i need i scrollable grid filling whole browser window, but grid here does not expand
  in height, so if grid has 0 rows, then it has 0 height and when i push "Add row", then
  added row looks obscured by scrollbars and this looks ugly.</p>
  
  <p>Also when grid contain more rows than could fit in browser window, then page scrollbar appears (not grid's scrollbar!) and this scrolls whole page so button bar scrolled away,  which is also undesirable and ugly.</p>
  
  <p>Any ideas what is wrong with my setup.</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>Finally fixed it, intermediate panel should also contain <strong>layout: 'fit'</strong></p>