examples/ux/layout/Center.js

   1 /**
   2  * @class Ext.ux.layout.Center
   3  * @extends Ext.layout.container.Fit
   4  * <p>This is a very simple layout style used to center contents within a container.  This layout works within
   5  * nested containers and can also be used as expected as a Viewport layout to center the page layout.</p>
   6  * <p>As a subclass of FitLayout, CenterLayout expects to have a single child panel of the container that uses
   7  * the layout.  The layout does not require any config options, although the child panel contained within the
   8  * layout must provide a fixed or percentage width.  The child panel's height will fit to the container by
   9  * default, but you can specify <tt>autoHeight:true</tt> to allow it to autosize based on its content height.
  10  * Example usage:</p>
  11  * <pre><code>
  12 // The content panel is centered in the container
  13 var p = Ext.create('Ext.Panel', {
  14     title: 'Center Layout',
  15     layout: 'ux.center',
  16     items: [{
  17         title: 'Centered Content',
  18         widthRatio: 0.75,
  19         html: 'Some content'
  20     }]
  21 });
  22
  23 // If you leave the title blank and specify no border
  24 // you'll create a non-visual, structural panel just
  25 // for centering the contents in the main container.
  26 var p = Ext.create('Ext.Panel', {
  27     layout: 'ux.center',
  28     border: false,
  29     items: [{
  30         title: 'Centered Content',
  31         width: 300,
  32         autoHeight: true,
  33         html: 'Some content'
  34     }]
  35 });
  36 </code></pre>
  37  */
  38 Ext.define('Ext.ux.layout.Center', {
  39     extend: 'Ext.layout.container.Fit',
  40     alias: 'layout.ux.center',
  41         // private
  42     setItemSize : function(item, width, height){
  43         this.owner.addCls('ux-layout-center');
  44         item.addCls('ux-layout-center-item');
  45         if(item && height > 0) {
  46             if (width) {
  47                 width = item.width;
  48                 if (Ext.isNumber(item.widthRatio)) {
  49                     width = Math.round(this.owner.el.getWidth() * item.widthRatio);
  50                 }
  51             }
  52             item.setSize(width, height);
  53         }
  54
  55     }
  56 });