docs/source/CenterLayout.html

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