// We are adding these custom layouts to a namespace that does not
// exist by default in Ext, so we have to add the namespace first:
Ext.ns('Ext.ux.layout');

/**
 * @class Ext.ux.layout.CenterLayout
 * @extends Ext.layout.FitLayout
 *

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'
    }]
});

 */

Ext.ux.layout.CenterLayout = Ext.extend(Ext.layout.FitLayout, {
       
// private
    setItemSize
: function(item, size){
       
this.container.addClass('ux-layout-center');
        item
.addClass('ux-layout-center-item');
       
if(item && size.height > 0){
           
if(item.width){
                size
.width = item.width;
           
}
            item
.setSize(size);
       
}
   
}
});

Ext.Container.LAYOUTS['ux.center'] = Ext.ux.layout.CenterLayout;