    /**
     * This is a base class for layouts that contain **a single item** that automatically expands to fill the layout's
     * container. This class is intended to be extended or created via the `layout: 'fit'`
     * {@link Ext.container.Container#layout} config, and should generally not need to be created directly via the new keyword.
     *
     * Fit layout does not have any direct config options (other than inherited ones). To fit a panel to a container using
     * Fit layout, simply set `layout: 'fit'` on the container and add a single panel to it. If the container has multiple
     * panels, only the first one will be displayed.
     *
     *     @example
     *     Ext.create('Ext.panel.Panel', {
     *         title: 'Fit Layout',
     *         width: 300,
     *         height: 150,
     *         layout:'fit',
     *         items: {
     *             title: 'Inner Panel',
     *             html: 'This is the inner panel content',
     *             bodyPadding: 20,
     *             border: false
     *         },
     *         renderTo: Ext.getBody()
     *     });
     */
    Ext.define('Ext.layout.container.Fit', {

        /* Begin Definitions */

        extend: 'Ext.layout.container.AbstractFit',
        alias: 'layout.fit',
        alternateClassName: 'Ext.layout.FitLayout',
        requires: ['Ext.layout.container.Box'],

        /* End Definitions */

        /**
         * @cfg {Object} defaultMargins
         * <p>If the individual contained items do not have a <tt>margins</tt>
         * property specified or margin specified via CSS, the default margins from this property will be
         * applied to each item.</p>
         * <br><p>This property may be specified as an object containing margins
         * to apply in the format:</p><pre><code>
    {
        top: (top margin),
        right: (right margin),
        bottom: (bottom margin),
        left: (left margin)
    }</code></pre>
         * <p>This property may also be specified as a string containing
         * space-separated, numeric margin values. The order of the sides associated
         * with each value matches the way CSS processes margin values:</p>
         * <div class="mdetail-params"><ul>
         * <li>If there is only one value, it applies to all sides.</li>
         * <li>If there are two values, the top and bottom borders are set to the
         * first value and the right and left are set to the second.</li>
         * <li>If there are three values, the top is set to the first value, the left
         * and right are set to the second, and the bottom is set to the third.</li>
         * <li>If there are four values, they apply to the top, right, bottom, and
         * left, respectively.</li>
         * </ul></div>
         * <p>Defaults to:</p><pre><code>
         * {top:0, right:0, bottom:0, left:0}
         * </code></pre>
         */
        defaultMargins: {
            top: 0,
            right: 0,
            bottom: 0,
            left: 0
        },

        // @private
        onLayout : function() {
            var me = this,
                size,
                item,
                margins;
            me.callParent();

            if (me.owner.items.length) {
                item = me.owner.items.get(0);
                margins = item.margins || me.defaultMargins;
                size = me.getLayoutTargetSize();
                size.width  -= margins.width;
                size.height -= margins.height;
                me.setItemBox(item, size);

                // If any margins were configure either through the margins config, or in the CSS style,
                // Then positioning will be used.
                if (margins.left || margins.top) {
                    item.setPosition(margins.left, margins.top);
                }
            }
        },

        getTargetBox : function() {
            return this.getLayoutTargetSize();
        },

        setItemBox : function(item, box) {
            var me = this;
            if (item && box.height > 0) {
                if (!me.owner.isFixedWidth()) {
                   box.width = undefined;
                }
                if (!me.owner.isFixedHeight()) {
                   box.height = undefined;
                }
                me.setItemSize(item, box.width, box.height);
            }
        },

        configureItem: function(item) {

            // Card layout only controls dimensions which IT has controlled.
            // That calculation has to be determined at run time by examining the ownerCt's isFixedWidth()/isFixedHeight() methods
            item.layoutManagedHeight = 0;
            item.layoutManagedWidth = 0;

            this.callParent(arguments);
        }
    }, function() {
        // Use Box layout's renderItem which reads CSS margins, and adds them to any configured item margins
        // (Defaulting to "0 0 0 0")
        this.prototype.renderItem = Ext.layout.container.Box.prototype.renderItem;
    });