docs/source/Auto.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-layout-container-Auto'>/**
  19 </span> * @class Ext.layout.container.Auto
  20  * @extends Ext.layout.container.Container
  21  *
  22  * &lt;p&gt;The AutoLayout is the default layout manager delegated by {@link Ext.container.Container} to
  23  * render any child Components when no &lt;tt&gt;{@link Ext.container.Container#layout layout}&lt;/tt&gt; is configured into
  24  * a &lt;tt&gt;{@link Ext.container.Container Container}.&lt;/tt&gt;.  AutoLayout provides only a passthrough of any layout calls
  25  * to any child containers.&lt;/p&gt;
  26  * {@img Ext.layout.container.Auto/Ext.layout.container.Auto.png Ext.layout.container.Auto container layout}
  27  * Example usage:
  28         Ext.create('Ext.Panel', {
  29                 width: 500,
  30                 height: 280,
  31                 title: &quot;AutoLayout Panel&quot;,
  32                 layout: 'auto',
  33                 renderTo: document.body,
  34                 items: [{
  35                         xtype: 'panel',
  36                         title: 'Top Inner Panel',
  37                         width: '75%',
  38                         height: 90
  39                 },{
  40                         xtype: 'panel',
  41                         title: 'Bottom Inner Panel',
  42                         width: '75%',
  43                         height: 90
  44                 }]
  45         });
  46  */
  47
  48 Ext.define('Ext.layout.container.Auto', {
  49
  50     /* Begin Definitions */
  51
  52     alias: ['layout.auto', 'layout.autocontainer'],
  53
  54     extend: 'Ext.layout.container.Container',
  55
  56     /* End Definitions */
  57
  58     type: 'autocontainer',
  59
  60     bindToOwnerCtComponent: true,
  61
  62     // @private
  63     onLayout : function(owner, target) {
  64         var me = this,
  65             items = me.getLayoutItems(),
  66             ln = items.length,
  67             i;
  68
  69         // Ensure the Container is only primed with the clear element if there are child items.
  70         if (ln) {
  71             // Auto layout uses natural HTML flow to arrange the child items.
  72             // To ensure that all browsers (I'm looking at you IE!) add the bottom margin of the last child to the
  73             // containing element height, we create a zero-sized element with style clear:both to force a &quot;new line&quot;
  74             if (!me.clearEl) {
  75                 me.clearEl = me.getRenderTarget().createChild({
  76                     cls: Ext.baseCSSPrefix + 'clear',
  77                     role: 'presentation'
  78                 });
  79             }
  80
  81             // Auto layout allows CSS to size its child items.
  82             for (i = 0; i &lt; ln; i++) {
  83                 me.setItemSize(items[i]);
  84             }
  85         }
  86     },
  87
  88     configureItem: function(item) {
  89
  90         // Auto layout does not manage any dimensions.
  91         // We have to check our type, because this could be called as a superclass method in a subclass
  92         if (this.type === 'autocontainer') {
  93             item.layoutManagedHeight = 2;
  94             item.layoutManagedWidth = 2;
  95         }
  96
  97         this.callParent(arguments);
  98     }
  99 });</pre>
 100 </body>
 101 </html>