// 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;