A three-panel application layout with a single line of code

This recipe explains how you can build a reusable Ext JS component that encapsulates one of the most popular GUI styles—a three-panel layout. Using the component will produce a layout like the one shown in the following screenshot:

This layout consists of a Navigation panel, a Master panel, and a Details panel as shown in the following screenshot:

The Master panel has a toolbar with a button that switches the Details panel's location from bottom to right, or hides it altogether:

Besides being able to add components to any of the layout's panels via configuration objects, you can also reconfigure any of the panels by the same means.

How to do it...

1. 1. Create the skeleton code of our component:

   Ext.ns('Ext.ux');
   Ext.ux.ThreePanelApp=function(conf) {
   // Master Panel
   // Details Panel
   // Nav Panel
   // MasterDetailsCnt
   }
   

2. 2. Create the Master panel:

   MasterPanel=function(conf) {
   config={ title: 'Master',
   region: 'center',
   tbar: [{
   split: true...