A custom column layout

Some applications have special layout requirements that cannot be met by the native Ext JS layouts. Luckily, you can extend these layouts and add the features that you need.

As an example, this recipe explains how to build a custom layout based on the column layout's features. This custom layout will allow you to separate each of the columns with a configurable distance. For example, a sample three-column ColumnLayout layout would look like this by default:

But when using this recipe's custom layout, the same sample allows for user-defined space between columns:

Getting ready...

Since this layout borrows heavily from Ext.layout.ColumnLayout, I recommend that you make yourself familiar with the source code of Ext.layout.ColumnLayout located in the ColumnLayout.js file of the library's SDK.

How to do it...

1. 1. Create the namespace for your custom layout:

   Ext.namespace('Ext.ux.layout');
   

2. 2. Define your custom layout as an extension of Ext.layout.ContainerLayout:

   Ext.ux.layout...