examples/docs/output/Ext.ux.layout.CenterLayout.html

   1 <div class="body-wrap" xmlns:ext="http://www.extjs.com"><div class="top-tools"><a class="inner-link" href="#Ext.ux.layout.CenterLayout-props"><img src="resources/images/default/s.gif" class="item-icon icon-prop">Properties</a>&#13;<a class="inner-link" href="#Ext.ux.layout.CenterLayout-methods"><img src="resources/images/default/s.gif" class="item-icon icon-method">Methods</a>&#13;<a class="inner-link" href="#Ext.ux.layout.CenterLayout-events"><img src="resources/images/default/s.gif" class="item-icon icon-event">Events</a>&#13;<a class="bookmark" href="../docs/?class=Ext.ux.layout.CenterLayout"><img src="resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a>&#13;</div><h1>Class <a href="source/ux-all-debug.html#cls-Ext.ux.layout.CenterLayout">Ext.ux.layout.CenterLayout</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext.ux.layout</td></tr><tr><td class="label">Defined In:</td><td class="hd-info"><a href="source/ux-all-debug.html#cls-Ext.ux.layout.CenterLayout">ux-all-debug.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/ux-all-debug.html#cls-Ext.ux.layout.CenterLayout">CenterLayout</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info">Object</td></tr></table><div class="description"><p>This is a very simple layout style used to center contents within a container.  This layout works within
   2 nested containers and can also be used as expected as a Viewport layout to center the page layout.</p>
   3 <p>As a subclass of FitLayout, CenterLayout expects to have a single child panel of the container that uses
   4 the layout.  The layout does not require any config options, although the child panel contained within the
   5 layout must provide a fixed or percentage width.  The child panel's height will fit to the container by
   6 default, but you can specify <tt>autoHeight:true</tt> to allow it to autosize based on its content height.
   7 Example usage:</p>
   8 <pre><code><i>// The content panel is centered <b>in</b> the container</i>
   9 <b>var</b> p = <b>new</b> Ext.Panel({
  10     title: <em>'Center Layout'</em>,
  11     layout: <em>'ux.center'</em>,
  12     items: [{
  13         title: <em>'Centered Content'</em>,
  14         width: <em>'75%'</em>,
  15         html: <em>'Some content'</em>
  16     }]
  17 });
  18
  19 <i>// If you leave the title blank and specify no border</i>
  20 <i>// you<em>'ll create a non-visual, structural panel just</i>
  21 <i>// <b>for</b> centering the contents <b>in</b> the main container.</i>
  22 <b>var</b> p = <b>new</b> Ext.Panel({
  23     layout: '</em>ux.center<em>',
  24     border: false,
  25     items: [{
  26         title: '</em>Centered Content<em>',
  27         width: 300,
  28         autoHeight: true,
  29         html: '</em>Some content<em>'
  30     }]
  31 });</code></pre></div><div class="hr"></div><a id="Ext.ux.layout.CenterLayout-props"></a><h2>Public Properties</h2><div class="no-members">This class has no public properties.</div><a id="Ext.ux.layout.CenterLayout-methods"></a><h2>Public Methods</h2><div class="no-members">This class has no public methods.</div><a id="Ext.ux.layout.CenterLayout-events"></a><h2>Public Events</h2><div class="no-members">This class has no public events.</div></div>