Creating a modern application layout with collapsible regions

This layout is very popular in modern applications where the GUI consists of multiple nested panels with split bars and collapsible regions. Here's a sample that you can use as a foundation for your applications as seen below:

How to do it...

1. 1. Set up the panels of the application:

   northPanel={
   title: 'North Panel',
   region: 'north',
   height: 150,
   minSize: 75,
   maxSize: 250,
   cmargins: '0 0 5 0'
   }
   southPanel={
   title: 'South Panel',
   region: 'south',
   height: 150,
   minSize: 75,
   maxSize: 250,
   cmargins: '5 0 0 0'
   }
   westPanel={
   title: 'West Panel',
   region: 'west',
   margins: '0 0 0 0',
   cmargins: '0 5 0 0',
   width: 175,
   minSize: 100,
   maxSize: 250
   }
   eastPanel={
   title: 'East Panel',
   region: 'east',
   margins: '0 0 0 0',
   cmargins: '0 0 0 5',
   width: 175,
   minSize: 100,
   maxSize: 250
   }
   centerPanel={
   title: 'Center Panel',
   collapsible: false,
   region: 'center',
   margins: '0 0 0 0'
   }
   

2. 2. Now, build the container and add the panels to it:

   var container=new...