examples/docs/source/CenterLayout.html

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