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.owner.isFixedWidth()) {
  73                box.width = undefined;
  74             }
  75             if (!me.owner.isFixedHeight()) {
  76                box.height = undefined;
  77             }
  78             me.setItemSize(item, box.width, box.height);
  79         }
  80     },
  81
  82     configureItem: function(item) {
  83
  84         // Card layout only controls dimensions which IT has controlled.
  85         // That calculation has to be determined at run time by examining the ownerCt's isFixedWidth()/isFixedHeight() methods
  86         item.layoutManagedHeight = 0;
  87         item.layoutManagedWidth = 0;
  88
  89         this.callParent(arguments);
  90     }
  91 });</pre>
  92 </body>
  93 </html>