ExtJS - Border Layout

• Border layout allows you you to create a layout based on the regions.
• Layout needs to be allocated as regions
• Typical ExtJS application has border layout has initial layout
  
  Following are the  regions defined in border layout
  
  • East
  • West  
  • Center - Main Content
  • North  - Header
  • South  - Footer
   
            {  id:'border-panel',
              title: 'Border Layout',
              layout: 'border',
              bodyBorder: false,
              defaults: {
                  collapsible: true,
                  split: true,
                  animFloat: false,
                  autoHide: false,
                  useSplitTips: true,
                  bodyStyle: 'padding:15px'
              },
              items: [{
                  title: 'Footer',
                  region: 'south',
                  height: 150,
                  minSize: 75,
                  maxSize: 250,
                  cmargins: '5 0 0 0',
                  html: '<p>Footer content</p>'
              },{
                  title: 'Navigation',
                  region:'west',
                  floatable: false,
                  margins: '5 0 0 0',
                  cmargins: '5 5 0 0',
                  width: 175,
                  minSize: 100,
                  maxSize: 250,
                  html: '<p>Secondary content like navigation links could go here</p>'
              },{
                  title: 'Main Content',
                  collapsible: false,
                  region: 'center',
                  margins: '5 0 0 0',
                  html: '<h1>Main Page</h1><p>This is where the main content would go</p>'
              }]
          },