docs/source/Auto2.html

   1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-layout.container.Auto'>/**
   2 </span> * @class Ext.layout.container.Auto
   3  * @extends Ext.layout.container.Container
   4  *
   5  * &lt;p&gt;The AutoLayout is the default layout manager delegated by {@link Ext.container.Container} to
   6  * render any child Components when no &lt;tt&gt;{@link Ext.container.Container#layout layout}&lt;/tt&gt; is configured into
   7  * a &lt;tt&gt;{@link Ext.container.Container Container}.&lt;/tt&gt;.  AutoLayout provides only a passthrough of any layout calls
   8  * to any child containers.&lt;/p&gt;
   9  * {@img Ext.layout.container.Auto/Ext.layout.container.Auto.png Ext.layout.container.Auto container layout}
  10  * Example usage:
  11         Ext.create('Ext.Panel', {
  12                 width: 500,
  13                 height: 280,
  14                 title: &quot;AutoLayout Panel&quot;,
  15                 layout: 'auto',
  16                 renderTo: document.body,
  17                 items: [{
  18                         xtype: 'panel',
  19                         title: 'Top Inner Panel',
  20                         width: '75%',
  21                         height: 90
  22                 },{
  23                         xtype: 'panel',
  24                         title: 'Bottom Inner Panel',
  25                         width: '75%',
  26                         height: 90
  27                 }]
  28         });
  29  */
  30
  31 Ext.define('Ext.layout.container.Auto', {
  32
  33     /* Begin Definitions */
  34
  35     alias: ['layout.auto', 'layout.autocontainer'],
  36
  37     extend: 'Ext.layout.container.Container',
  38
  39     /* End Definitions */
  40
  41     type: 'autocontainer',
  42
  43     fixedLayout: false,
  44
  45     bindToOwnerCtComponent: true,
  46
  47     // @private
  48     onLayout : function(owner, target) {
  49         var me = this,
  50             items = me.getLayoutItems(),
  51             ln = items.length,
  52             i;
  53
  54         // Ensure the Container is only primed with the clear element if there are child items.
  55         if (ln) {
  56             // Auto layout uses natural HTML flow to arrange the child items.
  57             // To ensure that all browsers (I'm looking at you IE!) add the bottom margin of the last child to the
  58             // containing element height, we create a zero-sized element with style clear:both to force a &quot;new line&quot;
  59             if (!me.clearEl) {
  60                 me.clearEl = me.getRenderTarget().createChild({
  61                     cls: Ext.baseCSSPrefix + 'clear',
  62                     role: 'presentation'
  63                 });
  64             }
  65
  66             // Auto layout allows CSS to size its child items.
  67             for (i = 0; i &lt; ln; i++) {
  68                 me.setItemSize(items[i]);
  69             }
  70         }
  71     }
  72 });</pre></pre></body></html>