-<!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'>/**
-</span> * @class Ext.layout.container.Auto
- * @extends Ext.layout.container.Container
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>The source code</title>
+ <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
+ <script type="text/javascript" src="../prettify/prettify.js"></script>
+ <style type="text/css">
+ .highlight { display: block; background-color: #ddd; }
+ </style>
+ <script type="text/javascript">
+ function highlight() {
+ document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+ }
+ </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+ <pre class="prettyprint lang-js"><span id='Ext-layout-component-Auto'>/**
+</span> * @class Ext.layout.component.Auto
+ * @extends Ext.layout.component.Component
+ * @private
*
- * <p>The AutoLayout is the default layout manager delegated by {@link Ext.container.Container} to
- * render any child Components when no <tt>{@link Ext.container.Container#layout layout}</tt> is configured into
- * a <tt>{@link Ext.container.Container Container}.</tt>. AutoLayout provides only a passthrough of any layout calls
- * to any child containers.</p>
- * {@img Ext.layout.container.Auto/Ext.layout.container.Auto.png Ext.layout.container.Auto container layout}
- * Example usage:
- Ext.create('Ext.Panel', {
- width: 500,
- height: 280,
- title: "AutoLayout Panel",
- layout: 'auto',
- renderTo: document.body,
- items: [{
- xtype: 'panel',
- title: 'Top Inner Panel',
- width: '75%',
- height: 90
- },{
- xtype: 'panel',
- title: 'Bottom Inner Panel',
- width: '75%',
- height: 90
- }]
- });
+ * <p>The AutoLayout is the default layout manager delegated by {@link Ext.Component} to
+ * render any child Elements when no <tt>{@link Ext.Component#layout layout}</tt> is configured.</p>
*/
-Ext.define('Ext.layout.container.Auto', {
+Ext.define('Ext.layout.component.Auto', {
/* Begin Definitions */
- alias: ['layout.auto', 'layout.autocontainer'],
+ alias: 'layout.autocomponent',
- extend: 'Ext.layout.container.Container',
+ extend: 'Ext.layout.component.Component',
/* End Definitions */
- type: 'autocontainer',
-
- fixedLayout: false,
-
- bindToOwnerCtComponent: true,
-
- // @private
- onLayout : function(owner, target) {
- var me = this,
- items = me.getLayoutItems(),
- ln = items.length,
- i;
-
- // Ensure the Container is only primed with the clear element if there are child items.
- if (ln) {
- // Auto layout uses natural HTML flow to arrange the child items.
- // To ensure that all browsers (I'm looking at you IE!) add the bottom margin of the last child to the
- // containing element height, we create a zero-sized element with style clear:both to force a "new line"
- if (!me.clearEl) {
- me.clearEl = me.getRenderTarget().createChild({
- cls: Ext.baseCSSPrefix + 'clear',
- role: 'presentation'
- });
- }
+ type: 'autocomponent',
- // Auto layout allows CSS to size its child items.
- for (i = 0; i < ln; i++) {
- me.setItemSize(items[i]);
- }
- }
+ onLayout : function(width, height) {
+ this.setTargetSize(width, height);
}
-});</pre></pre></body></html>
\ No newline at end of file
+});</pre>
+</body>
+</html>