Positioning components in multiple columns

Multicolumn layouts are pervasive today. They are a favorite choice when there is a need to display complex data, or to have an organized and easy-to-navigate GUI. This recipe explains how to set up this type of layout with Ext JS, as shown in the following screenshot:

How to do it...

1. 1. Create the columns of your layout:

   var column1={
   xtype:'panel',
   title: 'Column 1',
   columnWidth: .3,
   html: 'Width=30%'
   }
   var column2={
   xtype: 'panel',
   title: 'Column 2',
   columnWidth: .5,
   html: 'Width=50%'
   }
   var column3={
   xtype: 'panel',
   title: 'Column 3',
   width: 200,
   html: 'Width=200px'
   }
   

2. 2. Position the columns in a container that uses the column layout:

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

How it works...

Building a column layout requires you to create the panels that will constitute the columns. These columns are then added to a container that uses ColumnLayout. (Note the...