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="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/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> * This is a base class for layouts that contain **a single item** that automatically expands to fill the layout's
  20  * container. This class is intended to be extended or created via the `layout: 'fit'`
  21  * {@link Ext.container.Container#layout} config, and should generally not need to be created directly via the new keyword.
  22  *
  23  * Fit layout does not have any direct config options (other than inherited ones). To fit a panel to a container using
  24  * Fit layout, simply set `layout: 'fit'` on the container and add a single panel to it. If the container has multiple
  25  * panels, only the first one will be displayed.
  26  *
  27  *     @example
  28  *     Ext.create('Ext.panel.Panel', {
  29  *         title: 'Fit Layout',
  30  *         width: 300,
  31  *         height: 150,
  32  *         layout:'fit',
  33  *         items: {
  34  *             title: 'Inner Panel',
  35  *             html: 'This is the inner panel content',
  36  *             bodyPadding: 20,
  37  *             border: false
  38  *         },
  39  *         renderTo: Ext.getBody()
  40  *     });
  41  */
  42 Ext.define('Ext.layout.container.Fit', {
  43
  44     /* Begin Definitions */
  45
  46     extend: 'Ext.layout.container.AbstractFit',
  47     alias: 'layout.fit',
  48     alternateClassName: 'Ext.layout.FitLayout',
  49     requires: ['Ext.layout.container.Box'],
  50
  51     /* End Definitions */
  52
  53 <span id='Ext-layout-container-Fit-cfg-defaultMargins'>    /**
  54 </span>     * @cfg {Object} defaultMargins
  55      * &lt;p&gt;If the individual contained items do not have a &lt;tt&gt;margins&lt;/tt&gt;
  56      * property specified or margin specified via CSS, the default margins from this property will be
  57      * applied to each item.&lt;/p&gt;
  58      * &lt;br&gt;&lt;p&gt;This property may be specified as an object containing margins
  59      * to apply in the format:&lt;/p&gt;&lt;pre&gt;&lt;code&gt;
  60 {
  61     top: (top margin),
  62     right: (right margin),
  63     bottom: (bottom margin),
  64     left: (left margin)
  65 }&lt;/code&gt;&lt;/pre&gt;
  66      * &lt;p&gt;This property may also be specified as a string containing
  67      * space-separated, numeric margin values. The order of the sides associated
  68      * with each value matches the way CSS processes margin values:&lt;/p&gt;
  69      * &lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
  70      * &lt;li&gt;If there is only one value, it applies to all sides.&lt;/li&gt;
  71      * &lt;li&gt;If there are two values, the top and bottom borders are set to the
  72      * first value and the right and left are set to the second.&lt;/li&gt;
  73      * &lt;li&gt;If there are three values, the top is set to the first value, the left
  74      * and right are set to the second, and the bottom is set to the third.&lt;/li&gt;
  75      * &lt;li&gt;If there are four values, they apply to the top, right, bottom, and
  76      * left, respectively.&lt;/li&gt;
  77      * &lt;/ul&gt;&lt;/div&gt;
  78      * &lt;p&gt;Defaults to:&lt;/p&gt;&lt;pre&gt;&lt;code&gt;
  79      * {top:0, right:0, bottom:0, left:0}
  80      * &lt;/code&gt;&lt;/pre&gt;
  81      */
  82     defaultMargins: {
  83         top: 0,
  84         right: 0,
  85         bottom: 0,
  86         left: 0
  87     },
  88
  89     // @private
  90     onLayout : function() {
  91         var me = this,
  92             size,
  93             item,
  94             margins;
  95         me.callParent();
  96
  97         if (me.owner.items.length) {
  98             item = me.owner.items.get(0);
  99             margins = item.margins || me.defaultMargins;
 100             size = me.getLayoutTargetSize();
 101             size.width  -= margins.width;
 102             size.height -= margins.height;
 103             me.setItemBox(item, size);
 104
 105             // If any margins were configure either through the margins config, or in the CSS style,
 106             // Then positioning will be used.
 107             if (margins.left || margins.top) {
 108                 item.setPosition(margins.left, margins.top);
 109             }
 110         }
 111     },
 112
 113     getTargetBox : function() {
 114         return this.getLayoutTargetSize();
 115     },
 116
 117     setItemBox : function(item, box) {
 118         var me = this;
 119         if (item &amp;&amp; box.height &gt; 0) {
 120             if (!me.owner.isFixedWidth()) {
 121                box.width = undefined;
 122             }
 123             if (!me.owner.isFixedHeight()) {
 124                box.height = undefined;
 125             }
 126             me.setItemSize(item, box.width, box.height);
 127         }
 128     },
 129
 130     configureItem: function(item) {
 131
 132         // Card layout only controls dimensions which IT has controlled.
 133         // That calculation has to be determined at run time by examining the ownerCt's isFixedWidth()/isFixedHeight() methods
 134         item.layoutManagedHeight = 0;
 135         item.layoutManagedWidth = 0;
 136
 137         this.callParent(arguments);
 138     }
 139 }, function() {
 140     // Use Box layout's renderItem which reads CSS margins, and adds them to any configured item margins
 141     // (Defaulting to &quot;0 0 0 0&quot;)
 142     this.prototype.renderItem = Ext.layout.container.Box.prototype.renderItem;
 143 });</pre>
 144 </body>
 145 </html>