examples/layout-browser/layouts/custom.js

   1 /*!
   2  * Ext JS Library 3.2.1
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /*
   8  * CenterLayout demo panel
   9  */
  10 var centerLayout = {
  11         id: 'center-panel',
  12     layout: 'ux.center',
  13     items: {
  14         title: 'Centered Panel: 75% of container width and fit height',
  15         layout: 'ux.center',
  16         autoScroll: true,
  17         width: '75%',
  18         bodyStyle: 'padding:20px 0;',
  19         items: [{
  20                 title: 'Inner Centered Panel',
  21                 html: 'Fixed 300px wide and auto height. The container panel will also autoscroll if narrower than 300px.',
  22                 width: 300,
  23                 frame: true,
  24                 autoHeight: true,
  25                 bodyStyle: 'padding:10px 20px;'
  26         }]
  27     }
  28 };
  29
  30 /*
  31  * RowLayout demo panel
  32  */
  33 var rowLayout = {
  34         id: 'row-panel',
  35         bodyStyle: 'padding:5px',
  36         layout: 'ux.row',
  37     title: 'Row Layout',
  38     items: [{
  39         title: 'Height = 25%, Width = 50%',
  40         rowHeight: 0.25,
  41         width: '50%'
  42     },{
  43         title: 'Height = 100px, Width = 300px',
  44         height: 100,
  45         width: 300
  46     },{
  47         title: 'Height = 75%, Width = fit',
  48         rowHeight: 0.75
  49     }]
  50 };