    /**
     *
     * Fit Layout is probably the simplest layout available. All it does is make a child component fit to the full size of
     * its parent Container.
     *
     * {@img ../guides/layouts/fit.jpg}
     *
     * For example, if you have a parent Container that is 200px by 200px and give it a single child component and a 'fit'
     * layout, the child component will also be 200px by 200px:
     *
     *     var panel = Ext.create('Ext.Panel', {
     *         width: 200,
     *         height: 200,
     *         layout: 'fit',
     *
     *         items: {
     *             xtype: 'panel',
     *             html: 'Also 200px by 200px'
     *         }
     *     });
     *
     *     Ext.Viewport.add(panel);
     *
     * For a more detailed overview of what layouts are and the types of layouts shipped with Sencha Touch 2, check out the
     * [Layout Guide](#!/guide/layouts).
     */
    Ext.define('Ext.layout.Fit', {
        extend: 'Ext.layout.Default',
        alternateClassName: 'Ext.layout.FitLayout',

        alias: 'layout.fit',

        cls: Ext.baseCSSPrefix + 'layout-fit',

        itemCls: Ext.baseCSSPrefix + 'layout-fit-item',

        constructor: function(container) {
            this.callParent(arguments);

            this.apply();
        },

        apply: function() {
            this.container.innerElement.addCls(this.cls);
        },

        reapply: function() {
            this.apply();
        },

        unapply: function() {
            this.container.innerElement.removeCls(this.cls);
        },

        doItemAdd: function(item, index) {
            if (item.isInnerItem()) {
                item.addCls(this.itemCls);
            }

            this.callParent(arguments);
        },

        /**
         * @private
         */
        doItemRemove: function(item) {
            if (item.isInnerItem()) {
                item.removeCls(this.itemCls);
            }

            this.callParent(arguments);
        }
    });