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.