/*! * Ext JS Library 3.3.1 * Copyright(c) 2006-2010 Sencha Inc. * licensing@sencha.com * http://www.sencha.com/license */ // 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:
**/ 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;// 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' }] });