X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/b37ceabb82336ee82757cd32efe353cfab8ec267..f5240829880f87e0cf581c6a296e436fdef0ef80:/examples/docs/source/CenterLayout.html diff --git a/examples/docs/source/CenterLayout.html b/examples/docs/source/CenterLayout.html new file mode 100644 index 00000000..3d071b93 --- /dev/null +++ b/examples/docs/source/CenterLayout.html @@ -0,0 +1,73 @@ + +
+ +/*! + * Ext JS Library 3.3.0 + * Copyright(c) 2006-2010 Ext JS, Inc. + * licensing@extjs.com + * http://www.extjs.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 + *+ + \ No newline at end of fileThis 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' + }] +}); +