Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / docs / source / CenterLayout.html
1 <html>\r
2 <head>\r
3   <title>The source code</title>\r
4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
6 </head>\r
7 <body  onload="prettyPrint();">\r
8     <pre class="prettyprint lang-js">// We are adding these custom layouts to a namespace that does not
9 // exist by default in Ext, so we have to add the namespace first:
10 Ext.ns('Ext.ux.layout');
11
12 <div id="cls-Ext.ux.layout.CenterLayout"></div>/**
13  * @class Ext.ux.layout.CenterLayout
14  * @extends Ext.layout.FitLayout
15  * <p>This is a very simple layout style used to center contents within a container.  This layout works within
16  * nested containers and can also be used as expected as a Viewport layout to center the page layout.</p>
17  * <p>As a subclass of FitLayout, CenterLayout expects to have a single child panel of the container that uses
18  * the layout.  The layout does not require any config options, although the child panel contained within the
19  * layout must provide a fixed or percentage width.  The child panel's height will fit to the container by
20  * default, but you can specify <tt>autoHeight:true</tt> to allow it to autosize based on its content height.
21  * Example usage:</p>
22  * <pre><code>
23 // The content panel is centered in the container
24 var p = new Ext.Panel({
25     title: 'Center Layout',
26     layout: 'ux.center',
27     items: [{
28         title: 'Centered Content',
29         width: '75%',
30         html: 'Some content'
31     }]
32 });
33
34 // If you leave the title blank and specify no border
35 // you'll create a non-visual, structural panel just
36 // for centering the contents in the main container.
37 var p = new Ext.Panel({
38     layout: 'ux.center',
39     border: false,
40     items: [{
41         title: 'Centered Content',
42         width: 300,
43         autoHeight: true,
44         html: 'Some content'
45     }]
46 });
47 </code></pre>
48  */
49 Ext.ux.layout.CenterLayout = Ext.extend(Ext.layout.FitLayout, {
50         // private
51     setItemSize : function(item, size){
52         this.container.addClass('ux-layout-center');
53         item.addClass('ux-layout-center-item');
54         if(item && size.height > 0){
55             if(item.width){
56                 size.width = item.width;
57             }
58             item.setSize(size);
59         }
60     }
61 });
62
63 Ext.Container.LAYOUTS['ux.center'] = Ext.ux.layout.CenterLayout;
64 </pre>    \r
65 </body>\r
66 </html>