examples/ux/CenterLayout.js

   1 /*!
   2  * Ext JS Library 3.0.3
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 // We are adding these custom layouts to a namespace that does not
   8 // exist by default in Ext, so we have to add the namespace first:
   9 Ext.ns('Ext.ux.layout');
  10
  11 /**
  12  * @class Ext.ux.layout.CenterLayout
  13  * @extends Ext.layout.FitLayout
  14  * <p>This is a very simple layout style used to center contents within a container.  This layout works within
  15  * nested containers and can also be used as expected as a Viewport layout to center the page layout.</p>
  16  * <p>As a subclass of FitLayout, CenterLayout expects to have a single child panel of the container that uses
  17  * the layout.  The layout does not require any config options, although the child panel contained within the
  18  * layout must provide a fixed or percentage width.  The child panel's height will fit to the container by
  19  * default, but you can specify <tt>autoHeight:true</tt> to allow it to autosize based on its content height.
  20  * Example usage:</p>
  21  * <pre><code>
  22 // The content panel is centered in the container
  23 var p = new Ext.Panel({
  24     title: 'Center Layout',
  25     layout: 'ux.center',
  26     items: [{
  27         title: 'Centered Content',
  28         width: '75%',
  29         html: 'Some content'
  30     }]
  31 });
  32
  33 // If you leave the title blank and specify no border
  34 // you'll create a non-visual, structural panel just
  35 // for centering the contents in the main container.
  36 var p = new Ext.Panel({
  37     layout: 'ux.center',
  38     border: false,
  39     items: [{
  40         title: 'Centered Content',
  41         width: 300,
  42         autoHeight: true,
  43         html: 'Some content'
  44     }]
  45 });
  46 </code></pre>
  47  */
  48 Ext.ux.layout.CenterLayout = Ext.extend(Ext.layout.FitLayout, {
  49         // private
  50     setItemSize : function(item, size){
  51         this.container.addClass('ux-layout-center');
  52         item.addClass('ux-layout-center-item');
  53         if(item && size.height > 0){
  54             if(item.width){
  55                 size.width = item.width;
  56             }
  57             item.setSize(size);
  58         }
  59     }
  60 });
  61
  62 Ext.Container.LAYOUTS['ux.center'] = Ext.ux.layout.CenterLayout;