Properties Methods Events Direct Link

# Class Ext.ux.layout.CenterLayout

Package: | Ext.ux.layout
Defined In: | ux-all-debug.js
Class: | CenterLayout
Extends: | Object

This is a very simple layout style used to center contents within a container. This layout works within nested containers and can also be used as expected as a Viewport layout to center the page layout.

As a subclass of FitLayout, CenterLayout expects to have a single child panel of the container that uses the layout. The layout does not require any config options, although the child panel contained within the layout must provide a fixed or percentage width. The child panel's height will fit to the container by default, but you can specify `autoHeight:true` to allow it to autosize based on its content height. Example usage:

    // The content panel is centered in the container
    var p = new Ext.Panel({
        title: 'Center Layout',
        layout: 'ux.center',
        items: [{
            title: 'Centered Content',
            width: '75%',
            html: 'Some content'
        }]
    });

    // If you leave the title blank and specify no border
    // you'll create a non-visual, structural panel just
    // for centering the contents in the main container.
    var p = new Ext.Panel({
        layout: 'ux.center',
        border: false,
        items: [{
            title: 'Centered Content',
            width: 300,
            autoHeight: true,
            html: 'Some content'
        }]
    });

## Public Properties

This class has no public properties.

## Public Methods

This class has no public methods.

## Public Events

This class has no public events.