examples/layout/border.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 Ext.require(['*']);
  16 Ext.onReady(function() {
  17     var cw;
  18
  19     Ext.create('Ext.Viewport', {
  20         layout: {
  21             type: 'border',
  22             padding: 5
  23         },
  24         defaults: {
  25             split: true
  26         },
  27         items: [{
  28             region: 'north',
  29             collapsible: true,
  30             title: 'North',
  31             split: true,
  32             height: 100,
  33             html: 'north'
  34         },{
  35             region: 'west',
  36             collapsible: true,
  37             title: 'Starts at width 30%',
  38             split: true,
  39             width: '30%',
  40             html: 'west<br>I am floatable'
  41         },{
  42             region: 'center',
  43             layout: 'border',
  44             border: false,
  45             items: [{
  46                 region: 'center',
  47                 html: 'center center',
  48                 title: 'Center',
  49                 items: [cw = Ext.create('Ext.Window', {
  50                     xtype: 'window',
  51                     closable: false,
  52                     minimizable: true,
  53                     title: 'Constrained Window',
  54                     height: 200,
  55                     width: 400,
  56                     constrain: true,
  57                     html: 'I am in a Container',
  58                     itemId: 'center-window',
  59                     minimize: function() {
  60                         this.floatParent.down('button#toggleCw').toggle();
  61                     }
  62                 })],
  63                 dockedItems: [{
  64                     xtype: 'toolbar',
  65                     dock: 'bottom',
  66                     items: ['Text followed by a spacer',
  67                         ' ', {
  68                             itemId: 'toggleCw',
  69                             text: 'Constrained Window',
  70                             enableToggle: true,
  71                             toggleHandler: function() {
  72                             cw.setVisible(!cw.isVisible());
  73                         }
  74                     }]
  75                 }]
  76             },{
  77                 region: 'south',
  78                 height: 100,
  79                 split: true,
  80                 collapsible: true,
  81                 title: 'Splitter above me',
  82                 html: 'center south'
  83             }]
  84         },{
  85             region: 'east',
  86             collapsible: true,
  87             floatable: true,
  88             split: true,
  89             width: 200,
  90             title: 'East',
  91             layout: {
  92                 type: 'vbox',
  93                 padding: 5,
  94                 align: 'stretch'
  95             },
  96             items: [{
  97                 xtype: 'textfield',
  98                 fieldLabel: 'Text field'
  99             }, {
 100                 xtype: 'component',
 101                 html: 'I am floatable'
 102             }]
 103         },{
 104             region: 'south',
 105             collapsible: true,
 106             split: true,
 107             height: 200,
 108             title: 'South',
 109             layout: {
 110                 type: 'border',
 111                 padding: 5
 112             },
 113             items: [{
 114                 title: 'South Central',
 115                 region: 'center',
 116                 html: 'South Central'
 117             }, {
 118                 title: 'South Eastern',
 119                 region: 'east',
 120                 flex: 1,
 121                 html: 'South Eastern',
 122                 split: true,
 123                 collapsible: true
 124             }, {
 125                 title: 'South Western',
 126                 region: 'west',
 127                 flex: 1,
 128                 html: 'South Western<br>I collapse to nothing',
 129                 split: true,
 130                 collapsible: true,
 131                 collapseMode: 'mini'
 132             }]
 133         }]
 134     });
 135 });