examples/layout/border.js

   1 Ext.require(['*']);
   2 Ext.onReady(function() {
   3     var cw;
   4
   5     Ext.create('Ext.Viewport', {
   6         layout: {
   7             type: 'border',
   8             padding: 5
   9         },
  10         defaults: {
  11             split: true
  12         },
  13         items: [{
  14             region: 'north',
  15             collapsible: true,
  16             title: 'North',
  17             split: true,
  18             height: 100,
  19             html: 'north'
  20         },{
  21             region: 'west',
  22             collapsible: true,
  23             title: 'Starts at width 30%',
  24             split: true,
  25             width: '30%',
  26             html: 'west<br>I am floatable'
  27         },{
  28             region: 'center',
  29             layout: 'border',
  30             border: false,
  31             items: [{
  32                 region: 'center',
  33                 html: 'center center',
  34                 title: 'Center',
  35                 items: [cw = Ext.create('Ext.Window', {
  36                     xtype: 'window',
  37                     closable: false,
  38                     minimizable: true,
  39                     title: 'Constrained Window',
  40                     height: 200,
  41                     width: 400,
  42                     constrain: true,
  43                     html: 'I am in a Container',
  44                     itemId: 'center-window',
  45                     minimize: function() {
  46                         this.floatParent.down('button#toggleCw').toggle();
  47                     }
  48                 })],
  49                 dockedItems: [{
  50                     xtype: 'toolbar',
  51                     dock: 'bottom',
  52                     items: ['Text followed by a spacer',
  53                         ' ', {
  54                             itemId: 'toggleCw',
  55                             text: 'Constrained Window',
  56                             enableToggle: true,
  57                             toggleHandler: function() {
  58                             cw.setVisible(!cw.isVisible());
  59                         }
  60                     }]
  61                 }]
  62             },{
  63                 region: 'south',
  64                 height: 100,
  65                 split: true,
  66                 collapsible: true,
  67                 title: 'Splitter above me',
  68                 html: 'center south'
  69             }]
  70         },{
  71             region: 'east',
  72             collapsible: true,
  73             floatable: true,
  74             split: true,
  75             width: 200,
  76             title: 'East',
  77             layout: {
  78                 type: 'vbox',
  79                 padding: 5,
  80                 align: 'stretch'
  81             },
  82             items: [{
  83                 xtype: 'textfield',
  84                 fieldLabel: 'Text field'
  85             }, {
  86                 xtype: 'component',
  87                 html: 'I am floatable'
  88             }]
  89         },{
  90             region: 'south',
  91             collapsible: true,
  92             split: true,
  93             height: 200,
  94             title: 'South',
  95             layout: {
  96                 type: 'border',
  97                 padding: 5
  98             },
  99             items: [{
 100                 title: 'South Central',
 101                 region: 'center',
 102                 html: 'South Central'
 103             }, {
 104                 title: 'South Eastern',
 105                 region: 'east',
 106                 flex: 1,
 107                 html: 'South Eastern',
 108                 split: true,
 109                 collapsible: true
 110             }, {
 111                 title: 'South Western',
 112                 region: 'west',
 113                 flex: 1,
 114                 html: 'South Western<br>I collapse to nothing',
 115                 split: true,
 116                 collapsible: true,
 117                 collapseMode: 'mini'
 118             }]
 119         }]
 120     });
 121 });