Clear Up
SharpKit Reference

Fit Class

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' 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.

    Ext.create('Ext.panel.Panel', {
            title: 'Fit Layout',
            width: 300,
            height: 150,
            items: {
            title: 'Inner Panel',
            html: 'This is the inner panel content',
            bodyPadding: 20,
            border: false
            renderTo: Ext.getBody()

If the container has multiple items, all of the items will all be equally sized. This is usually not desired, so to avoid this, place only a single item in the container. This sizing of all items can be used to provide a background image that is "behind" another item such as a dataview if you also absolutely position the items.

Namespace: Ext.layout.container

Base Interfaces



Name Description
defaultMargins If the individual contained items do not have a margins property specified or margin specified via CSS, the default margins from this property will be applied to each item. This property may be specified as an object containing margins to apply in the format:
            top: (top margin),
            right: (right margin),
            bottom: (bottom margin),
            left: (left margin)
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:
  • If there is only one value, it applies to all sides.
  • 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.
  • 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.
  • If there are four values, they apply to the top, right, bottom, and left, respectively.
  • Defaults to: {top: 0, right: 0, bottom: 0, left: 0}
    © Copyright 2005-2011 SharpKit. All rights reserved.