Taking all the browser window's real estate

There are times when you want a component to automatically expand and fill its container. In the following screenshot, you'll see how a panel can be made to take up the whole browser window using a FitLayout layout manager:

How to do it...

1. 1. Create the panel that will take all of its container's area:

   greedyPanel={ title: 'Fit Layout',
   html: 'Panel using FitLayout'
   }
   

2. 2. The container is the one that lets its children fill the area:

   var container=new Ext.Viewport({
   layout: 'fit',
   defaults: {
   bodyStyle: 'padding:10px'
   },
   items: [
   greedyPanel
   ]
   });
   

How it works...

Note the use of the layout:'fit' configuration option. FitLayout automatically expands the panel to fill its container, the Ext.ViewPort instance. The Viewport renders itself to the document body and automatically resizes itself to the size of the browser's viewport.

There's more...

When using fit layouts, you should be aware that if the container has multiple panels, only the first one will...