Upgrade to ExtJS 4.0.1 - Released 05/18/2011
[extjs.git] / docs / source / Fit.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-Fit'>/**
19 </span> * @class Ext.layout.container.Fit
20  * @extends Ext.layout.container.AbstractFit
21  * &lt;p&gt;This is a base class for layouts that contain &lt;b&gt;a single item&lt;/b&gt; that automatically expands to fill the layout's
22  * container.  This class is intended to be extended or created via the &lt;tt&gt;layout:'fit'&lt;/tt&gt; {@link Ext.container.Container#layout}
23  * config, and should generally not need to be created directly via the new keyword.&lt;/p&gt;
24  * &lt;p&gt;FitLayout does not have any direct config options (other than inherited ones).  To fit a panel to a container
25  * using FitLayout, simply set layout:'fit' on the container and add a single panel to it.  If the container has
26  * multiple panels, only the first one will be displayed.  
27  * {@img Ext.layout.container.Fit/Ext.layout.container.Fit.png Ext.layout.container.Fit container layout}
28  * Example usage:&lt;/p&gt;
29  * &lt;pre&gt;&lt;code&gt;
30     Ext.create('Ext.panel.Panel', {
31         title: 'Fit Layout',
32         width: 300,
33         height: 150,
34         layout:'fit',
35         items: {
36             title: 'Inner Panel',
37             html: 'This is the inner panel content',
38             bodyPadding: 20,
39             border: false
40         },
41         renderTo: Ext.getBody()
42     });  
43 &lt;/code&gt;&lt;/pre&gt;
44  */
45 Ext.define('Ext.layout.container.Fit', {
46
47     /* Begin Definitions */
48
49     extend: 'Ext.layout.container.AbstractFit',
50     alias: 'layout.fit',
51     alternateClassName: 'Ext.layout.FitLayout',
52
53     /* End Definitions */
54    
55     // @private
56     onLayout : function() {
57         var me = this;
58         me.callParent();
59
60         if (me.owner.items.length) {
61             me.setItemBox(me.owner.items.get(0), me.getLayoutTargetSize());
62         }
63     },
64
65     getTargetBox : function() {
66         return this.getLayoutTargetSize();
67     },
68
69     setItemBox : function(item, box) {
70         var me = this;
71         if (item &amp;&amp; box.height &gt; 0) {
72             if (me.isManaged('width') === true) {
73                box.width = undefined;
74             }
75             if (me.isManaged('height') === true) {
76                box.height = undefined;
77             }
78             me.setItemSize(item, box.width, box.height);
79         }
80     }
81 });</pre>
82 </body>
83 </html>