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             minHeight: 60,
  34             html: 'north'
  35         },{
  36             region: 'west',
  37             collapsible: true,
  38             title: 'Starts at width 30%',
  39             split: true,
  40             width: '30%',
  41             minWidth: 100,
  42             minHeight: 140,
  43             html: 'west<br>I am floatable'
  44         },{
  45             region: 'center',
  46             layout: 'border',
  47             border: false,
  48             items: [{
  49                 region: 'center',
  50                 html: 'center center',
  51                 title: 'Center',
  52                 minHeight: 80,
  53                 items: [cw = Ext.create('Ext.Window', {
  54                     xtype: 'window',
  55                     closable: false,
  56                     minimizable: true,
  57                     title: 'Constrained Window',
  58                     height: 200,
  59                     width: 400,
  60                     constrain: true,
  61                     html: 'I am in a Container',
  62                     itemId: 'center-window',
  63                     minimize: function() {
  64                         this.floatParent.down('button#toggleCw').toggle();
  65                     }
  66                 })],
  67                 dockedItems: [{
  68                     xtype: 'toolbar',
  69                     dock: 'bottom',
  70                     items: ['Text followed by a spacer',
  71                         ' ', {
  72                             itemId: 'toggleCw',
  73                             text: 'Constrained Window',
  74                             enableToggle: true,
  75                             toggleHandler: function() {
  76                             cw.setVisible(!cw.isVisible());
  77                         }
  78                     }]
  79                 }]
  80             },{
  81                 region: 'south',
  82                 height: 100,
  83                 split: true,
  84                 collapsible: true,
  85                 title: 'Splitter above me',
  86                 minHeight: 60,
  87                 html: 'center south'
  88             }]
  89         },{
  90             region: 'east',
  91             collapsible: true,
  92             floatable: true,
  93             split: true,
  94             width: 200,
  95             minWidth: 120,
  96             minHeight: 140,
  97             title: 'East',
  98             layout: {
  99                 type: 'vbox',
 100                 padding: 5,
 101                 align: 'stretch'
 102             },
 103             items: [{
 104                 xtype: 'textfield',
 105                 labelWidth: 70,
 106                 fieldLabel: 'Text field'
 107             }, {
 108                 xtype: 'component',
 109                 html: 'I am floatable'
 110             }]
 111         },{
 112             region: 'south',
 113             collapsible: true,
 114             split: true,
 115             height: 200,
 116             minHeight: 120,
 117             title: 'South',
 118             layout: {
 119                 type: 'border',
 120                 padding: 5
 121             },
 122             items: [{
 123                 title: 'South Central',
 124                 region: 'center',
 125                 minWidth: 80,
 126                 html: 'South Central'
 127             }, {
 128                 title: 'South Eastern',
 129                 region: 'east',
 130                 flex: 1,
 131                 minWidth: 80,
 132                 html: 'South Eastern',
 133                 split: true,
 134                 collapsible: true
 135             }, {
 136                 title: 'South Western',
 137                 region: 'west',
 138                 flex: 1,
 139                 minWidth: 80,
 140                 html: 'South Western<br>I collapse to nothing',
 141                 split: true,
 142                 collapsible: true,
 143                 collapseMode: 'mini'
 144             }]
 145         }]
 146     });
 147 });