Maintaining components' proportions when their containers are resized

Having components that maintain their proportions when their containers are resized is important, especially, when dealing with form elements.

In the following screenshot, there are three panels that resize themselves as their container is resized:

How to do it...

1. 1. Create the panels that will be displayed:

   panel1=new Ext.Panel({
   title: 'Panel 1',
   html: 'Width=container width\' - 50 px',
   // Width=container width' - 50 px.
   anchor: '-50'
   });
   panel2=new Ext.Panel({
   title: 'Panel 2',
   html: 'Width=75% of container',
   // Width=75% of container.
   anchor: '75%'
   });
   panel3=new Ext.Panel({
   title: 'Panel 3',
   html: 'Width=50% of container<br/>Height=container\'s - 150 px',
   // Width=50% of container,
   // Height=container's - 150 px.
   anchor: '50%, -150'
   });
   

2. 2. Now, create the container window. When this window is resized, the panels will maintain their proportions:

   var container=new Ext.Window({
   title: 'Anchor Layout',
   width: 600,
   height...