Laying out items within a container using CSS-style absolute positioning

Sometimes, you need to position components using the standard X and Y coordinates. In this recipe, I position two panels in the container using an absolute layout. The following screenshot shows how the end result will look like:

How to do it...

1. 1. Create a couple of panels that will be absolute-positioned:

   panel1=new Ext.Panel({
   title: 'Panel 2',
   // When using absolute layouts,
   // you need to specify the coordinates.
   x: 50,
   y: 50,
   width: 200,
   height:200,
   html: 'Positioned at x:50, y:50'
   });
   panel2=new Ext.Panel({
   title: 'Panel 2',
   x: 200,
   y: 200,
   width: 300,
   height: 150,
   html: 'Positioned at x:100, y:100'
   });
   

2. 2. Create a container for the panels:

   var viewport=new Ext.Viewport({
   // Position items within this container using
   // CSS-style absolute positioning.
   layout:'absolute',
   items:[panel1, panel2]
   });
   

How it works...

Locating items in specific positions is achieved by assigning an absolute layout for the layout configuration...