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