extjs/examples/kitchensink/classic/samples/view/layout/Border.js

   1 /**
   2  * Demonstrates usage of a border layout.
   3  */
   4 Ext.define('KitchenSink.view.layout.Border', {
   5     extend: 'Ext.panel.Panel',
   6     xtype: 'layout-border',
   7     requires: [
   8         'Ext.layout.container.Border'
   9     ],
  10     //<example>
  11     exampleTitle: 'Border Layout',
  12     //</example>
  13     layout: 'border',
  14     width: 500,
  15     height: 400,
  16
  17     bodyBorder: false,
  18
  19     defaults: {
  20         collapsible: true,
  21         split: true,
  22         bodyPadding: 10
  23     },
  24
  25     items: [
  26         {
  27             title: 'Footer',
  28             region: 'south',
  29             height: 100,
  30             minHeight: 75,
  31             maxHeight: 150,
  32             html: '<p>Footer content</p>'
  33         },
  34         {
  35             title: 'Navigation',
  36             region:'west',
  37             floatable: false,
  38             margin: '5 0 0 0',
  39             width: 125,
  40             minWidth: 100,
  41             maxWidth: 250,
  42             html: '<p>Secondary content like navigation links could go here</p>'
  43         },
  44         {
  45             title: 'Main Content',
  46             collapsible: false,
  47             region: 'center',
  48             margin: '5 0 0 0',
  49             html: '<h2>Main Page</h2><p>This is where the main content would go</p>'
  50         }
  51     ]
  52
  53 });