3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
7 // We are adding these custom layouts to a namespace that does not
8 // exist by default in Ext, so we have to add the namespace first:
9 Ext.ns('Ext.ux.layout');
12 * @class Ext.ux.layout.CenterLayout
13 * @extends Ext.layout.FitLayout
14 * <p>This is a very simple layout style used to center contents within a container. This layout works within
15 * nested containers and can also be used as expected as a Viewport layout to center the page layout.</p>
16 * <p>As a subclass of FitLayout, CenterLayout expects to have a single child panel of the container that uses
17 * the layout. The layout does not require any config options, although the child panel contained within the
18 * layout must provide a fixed or percentage width. The child panel's height will fit to the container by
19 * default, but you can specify <tt>autoHeight:true</tt> to allow it to autosize based on its content height.
22 // The content panel is centered in the container
23 var p = new Ext.Panel({
24 title: 'Center Layout',
27 title: 'Centered Content',
33 // If you leave the title blank and specify no border
34 // you'll create a non-visual, structural panel just
35 // for centering the contents in the main container.
36 var p = new Ext.Panel({
40 title: 'Centered Content',
48 Ext.ux.layout.CenterLayout = Ext.extend(Ext.layout.FitLayout, {
50 setItemSize : function(item, size){
51 this.container.addClass('ux-layout-center');
52 item.addClass('ux-layout-center-item');
53 if(item && size.height > 0){
55 size.width = item.width;
62 Ext.Container.LAYOUTS['ux.center'] = Ext.ux.layout.CenterLayout;