Start line:  
End line:  

Snippet Preview

Snippet HTML Code

Stack Overflow Questions
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema attributeFormDefault="unqualified" elementFormDefault="qualified" targetNamespace="exml:ext.layout" xmlns:el="exml:ext.layout" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:exml="http://www.jangaroo.net/exml/0.8" >
  <xs:import namespace="http://www.jangaroo.net/exml/0.8"/>
  <xs:complexType name='AbsoluteLayout_TYPE'>
    <xs:complexContent>
      <xs:extension base='el:AnchorLayout_TYPE'>
        <xs:sequence>
        </xs:sequence>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='AbsoluteLayout' type='el:AbsoluteLayout_TYPE' substitutionGroup='el:AnchorLayout'>
    <xs:annotation>
      <xs:documentation>
        This is a layout that inherits the anchoring of <b><a href="Ext.layout.AnchorLayout.html">Ext.layout.AnchorLayout</a></b> and adds the ability for x/y positioning using the standard x and y component config options. <p>This class is intended to be extended or created via the <tt><b><a href="output/Ext.Container.html#Ext.Container-layout">layout</a></b></tt> configuration property. See <tt><b><a href="output/Ext.Container.html#Ext.Container-layout">Ext.Container.layout</a></b></tt> for additional details.</p><p>Example usage:</p><pre><code>var form = new Ext.form.FormPanel({ title: 'Absolute Layout', layout:'absolute', layoutConfig: { // layout-specific configs go here extraCls: 'x-abs-layout-item', }, baseCls: 'x-plain', url:'save-form.php', defaultType: 'textfield', items: [{ x: 0, y: 5, xtype:'label', text: 'Send To:' },{ x: 60, y: 0, name: 'to', anchor:'100%' // anchor width by percentage },{ x: 0, y: 35, xtype:'label', text: 'Subject:' },{ x: 60, y: 30, name: 'subject', anchor: '100%' // anchor width by percentage },{ x:0, y: 60, xtype: 'textarea', name: 'msg', anchor: '100% 100%' // anchor width and height }] }); </code></pre> <p>This class serves as a typed config object for constructor of class AbsoluteLayout.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.AbsoluteLayout
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='AccordionLayout_TYPE'>
    <xs:complexContent>
      <xs:extension base='el:FitLayout_TYPE'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:Boolean' name='activeOnTop'>
          <xs:annotation>
            <xs:documentation>
              True to swap the position of each panel as it is expanded so that it becomes the first item in the container, false to keep the panels in the rendered order. <b>This is NOT compatible with "animate:true"</b> (defaults to false).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='animate'>
          <xs:annotation>
            <xs:documentation>
              True to slide the contained panels open and closed during expand/collapse using animation, false to open and close directly with no animation (defaults to false). Note: to defer to the specific config setting of each contained panel for this property, set this to undefined at the layout level.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='autoWidth'>
          <xs:annotation>
            <xs:documentation>
              True to set each contained item's width to 'auto', false to use the item's current width (defaults to true). Note that some components, in particular the <a href="Ext.grid.GridPanel.html">grid</a>, will not function properly within layouts if they have auto width, so in such cases this config should be set to false.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='collapseFirst'>
          <xs:annotation>
            <xs:documentation>
              True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools in the contained panels' title bars, false to render it last (defaults to false).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='fill'>
          <xs:annotation>
            <xs:documentation>
              True to adjust the active item's height to fill the available space in the container, false to use the item's current height, or auto height if not explicitly set (defaults to true).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='hideCollapseTool'>
          <xs:annotation>
            <xs:documentation>
              True to hide the contained panels' collapse/expand toggle buttons, false to display them (defaults to false). When set to true, <a href="output/Ext.layout.AccordionLayout.html#Ext.layout.AccordionLayout-titleCollapse">titleCollapse</a> should be true also.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='sequence'>
          <xs:annotation>
            <xs:documentation>
              <b>Experimental</b>. If animate is set to true, this will result in each animation running in sequence.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='titleCollapse'>
          <xs:annotation>
            <xs:documentation>
              True to allow expand/collapse of each contained panel by clicking anywhere on the title bar, false to allow expand/collapse only when the toggle tool button is clicked (defaults to true). When set to false, <a href="output/Ext.layout.AccordionLayout.html#Ext.layout.AccordionLayout-hideCollapseTool">hideCollapseTool</a> should be false also.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='AccordionLayout' type='el:AccordionLayout_TYPE' substitutionGroup='el:FitLayout'>
    <xs:annotation>
      <xs:documentation>
        This is a layout that manages multiple Panels in an expandable accordion style such that only <b>one Panel can be expanded at any given time</b>. Each Panel has built-in support for expanding and collapsing. <p>Note: Only Ext.Panels <b>and all subclasses of Ext.Panel</b> may be used in an accordion layout Container.</p><p>This class is intended to be extended or created via the <tt><b><a href="output/Ext.Container.html#Ext.Container-layout">layout</a></b></tt> configuration property. See <tt><b><a href="output/Ext.Container.html#Ext.Container-layout">Ext.Container.layout</a></b></tt> for additional details.</p><p>Example usage:</p><pre><code>var accordion = new Ext.Panel({ title: 'Accordion Layout', layout:'accordion', defaults: { // applied to each contained panel bodyStyle: 'padding:15px' }, layoutConfig: { // layout-specific configs go here titleCollapse: false, animate: true, activeOnTop: true }, items: [{ title: 'Panel 1', html: '&lt;p&gt;Panel content!&lt;/p&gt;' },{ title: 'Panel 2', html: '&lt;p&gt;Panel content!&lt;/p&gt;' },{ title: 'Panel 3', html: '&lt;p&gt;Panel content!&lt;/p&gt;' }] }); </code></pre> <p>This class serves as a typed config object for constructor of class AccordionLayout.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.AccordionLayout
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='AnchorLayout_TYPE'>
    <xs:complexContent>
      <xs:extension base='el:ContainerLayout_TYPE'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='anchor'>
          <xs:annotation>
            <xs:documentation>
              This configuration option is to be applied to <b>child <tt>items</tt></b> of a container managed by this layout (ie. configured with <tt>layout:'anchor'</tt>). <br/><p>This value is what tells the layout how an item should be anchored to the container. <tt>items</tt> added to an AnchorLayout accept an anchoring-specific config property of <b>anchor</b> which is a string containing two values: the horizontal anchor value and the vertical anchor value (for example, '100% 50%'). The following types of anchor values are supported:</p><div class="mdetail-params"><ul><li><b>Percentage</b> : Any value between 1 and 100, expressed as a percentage.<div class="sub-desc">The first anchor is the percentage width that the item should take up within the container, and the second is the percentage height. For example:<pre><code>// two values specified anchor: '100% 50%' // render item complete width of the container and // 1/2 height of the container // one value specified anchor: '100%' // the width value; the height will default to auto </code></pre></div></li><li><b>Offsets</b> : Any positive or negative integer value.<div class="sub-desc">This is a raw adjustment where the first anchor is the offset from the right edge of the container, and the second is the offset from the bottom edge. For example:<pre><code>// two values specified anchor: '-50 -100' // render item the complete width of the container // minus 50 pixels and // the complete height minus 100 pixels. // one value specified anchor: '-50' // anchor value is assumed to be the right offset value // bottom offset will default to 0 </code></pre></div></li><li><b>Sides</b> : Valid values are <tt>'right'</tt> (or <tt>'r'</tt>) and <tt>'bottom'</tt> (or <tt>'b'</tt>).<div class="sub-desc">Either the container must have a fixed size or an anchorSize config value defined at render time in order for these to have any effect.</div></li><li><b>Mixed</b> : <div class="sub-desc">Anchor values can also be mixed as needed. For example, to render the width offset from the container right edge by 50 pixels and 75% of the container's height use: <pre><code>anchor: '-50 75%' </code></pre></div></li></ul></div>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='defaultAnchor'>
          <xs:annotation>
            <xs:documentation>
              default anchor for all child container items applied if no anchor or specific width is set on the child item. Defaults to '100%'.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='AnchorLayout' type='el:AnchorLayout_TYPE' substitutionGroup='el:ContainerLayout'>
    <xs:annotation>
      <xs:documentation>
        This is a layout that enables anchoring of contained elements relative to the container's dimensions. If the container is resized, all anchored items are automatically rerendered according to their <b><tt><a href="output/Ext.layout.AnchorLayout.html#Ext.layout.AnchorLayout-anchor">anchor</a></tt></b> rules. <p>This class is intended to be extended or created via the layout:'anchor' <a href="output/Ext.Container.html#Ext.Container-layout">Ext.Container.layout</a> config, and should generally not need to be created directly via the new keyword.</p><p>AnchorLayout does not have any direct config options (other than inherited ones). By default, AnchorLayout will calculate anchor measurements based on the size of the container itself. However, the container using the AnchorLayout can supply an anchoring-specific config property of <b>anchorSize</b>. If anchorSize is specified, the layout will use it as a virtual container for the purposes of calculating anchor measurements based on it instead, allowing the container to be sized independently of the anchoring logic if necessary. For example:</p><pre><code>var viewport = new Ext.Viewport({ layout:'anchor', anchorSize: {width:800, height:600}, items:[{ title:'Item 1', html:'Content 1', width:800, anchor:'right 20%' },{ title:'Item 2', html:'Content 2', width:300, anchor:'50% 30%' },{ title:'Item 3', html:'Content 3', width:600, anchor:'-100 50%' }] }); </code></pre> <p>This class serves as a typed config object for constructor of class AnchorLayout.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.AnchorLayout
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='BorderLayout_TYPE'>
    <xs:complexContent>
      <xs:extension base='el:ContainerLayout_TYPE'>
        <xs:sequence>
        </xs:sequence>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='BorderLayout' type='el:BorderLayout_TYPE' substitutionGroup='el:ContainerLayout'>
    <xs:annotation>
      <xs:documentation>
        This is a multi-pane, application-oriented UI layout style that supports multiple nested panels, automatic <a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-split">split</a> bars between <a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-BorderLayout.Region">regions</a> and built-in <a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-collapsible">expanding and collapsing</a> of regions. <p>This class is intended to be extended or created via the <tt>layout:'border'</tt> <a href="output/Ext.Container.html#Ext.Container-layout">Ext.Container.layout</a> config, and should generally not need to be created directly via the new keyword.</p><p>BorderLayout does not have any direct config options (other than inherited ones). All configuration options available for customizing the BorderLayout are at the <a href="Ext.layout.BorderLayout.Region.html">Ext.layout.BorderLayout.Region</a> and <a href="Ext.layout.BorderLayout.SplitRegion.html">Ext.layout.BorderLayout.SplitRegion</a> levels.</p><p>Example usage:</p><pre><code>var myBorderPanel = new Ext.Panel({ <a href="output/Ext.Component.html#Ext.Component-renderTo">renderTo</a>: document.body, <a href="output/Ext.BoxComponent.html#Ext.BoxComponent-width">width</a>: 700, <a href="output/Ext.BoxComponent.html#Ext.BoxComponent-height">height</a>: 500, <a href="output/Ext.Panel.html#Ext.Panel-title">title</a>: 'Border Layout', <a href="output/Ext.Container.html#Ext.Container-layout">layout</a>: 'border', <a href="output/Ext.Container.html#Ext.Container-items">items</a>: [{ <a href="output/Ext.Panel.html#Ext.Panel-title">title</a>: 'South Region is resizable', <a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-BorderLayout.Region">region</a>: 'south', // position for region <a href="output/Ext.BoxComponent.html#Ext.BoxComponent-height">height</a>: 100, <a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-split">split</a>: true, // enable resizing <a href="output/Ext.SplitBar.html#Ext.SplitBar-minSize">minSize</a>: 75, // defaults to <a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-minHeight">50</a> <a href="output/Ext.SplitBar.html#Ext.SplitBar-maxSize">maxSize</a>: 150, <a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-margins">margins</a>: '0 5 5 5' },{ // xtype: 'panel' implied by default <a href="output/Ext.Panel.html#Ext.Panel-title">title</a>: 'West Region is collapsible', <a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-BorderLayout.Region">region</a>:'west', <a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-margins">margins</a>: '5 0 0 5', <a href="output/Ext.BoxComponent.html#Ext.BoxComponent-width">width</a>: 200, <a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-collapsible">collapsible</a>: true, // make collapsible <a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-cmargins">cmargins</a>: '5 5 0 5', // adjust top margin when collapsed <a href="output/Ext.Component.html#Ext.Component-id">id</a>: 'west-region-container', <a href="output/Ext.Container.html#Ext.Container-layout">layout</a>: 'fit', <a href="output/Ext.Panel.html#Ext.Panel-unstyled">unstyled</a>: true },{ <a href="output/Ext.Panel.html#Ext.Panel-title">title</a>: 'Center Region', <a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-BorderLayout.Region">region</a>: 'center', // center region is required, no width/height specified <a href="output/Ext.Component.html#Ext.Component-xtype">xtype</a>: 'container', <a href="output/Ext.Container.html#Ext.Container-layout">layout</a>: 'fit', <a href="output/Ext.layout.BorderLayout.Region.html#Ext.layout.BorderLayout.Region-margins">margins</a>: '5 5 0 0' }] }); </code></pre><p><b><u>Notes</u></b>:</p><div class="mdetail-params"><ul><li>Any container using the BorderLayout <b>must</b> have a child item with <tt>region:'center'</tt>. The child item in the center region will always be resized to fill the remaining space not used by the other regions in the layout.</li><li>Any child items with a region of <tt>west</tt> or <tt>east</tt> must have <tt>width</tt> defined (an integer representing the number of pixels that the region should take up).</li><li>Any child items with a region of <tt>north</tt> or <tt>south</tt> must have <tt>height</tt> defined.</li><li>The regions of a BorderLayout are <b>fixed at render time</b> and thereafter, its child Components may not be removed or added. To add/remove Components within a BorderLayout, have them wrapped by an additional Container which is directly managed by the BorderLayout. If the region is to be collapsible, the Container used directly by the BorderLayout manager should be a Panel. In the following example a Container (an Ext.Panel) is added to the west region: <div style="margin-left:16px"><pre><code>wrc = <a href="output/Ext.html#Ext-getCmp">Ext.getCmp</a>('west-region-container'); wrc.<a href="output/Ext.Panel.html#Ext.Panel-removeAll">removeAll</a>(); wrc.<a href="output/Ext.Container.html#Ext.Container-add">add</a>({ title: 'Added Panel', html: 'Some content' }); wrc.<a href="output/Ext.Container.html#Ext.Container-doLayout">doLayout</a>(); </code></pre></div></li><li>To reference a <a href="Ext.layout.BorderLayout.Region.html">Region</a>: <div style="margin-left:16px"><pre><code>wr = myBorderPanel.layout.west; </code></pre></div></li></ul></div> <p>This class serves as a typed config object for constructor of class BorderLayout.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.BorderLayout
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='BoxLayout_TYPE'>
    <xs:complexContent>
      <xs:extension base='el:ContainerLayout_TYPE'>
        <xs:sequence>
            <xs:element name='defaultMargins' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  If the individual contained items do not have a <tt>margins</tt> property specified, the default margins from this property will be applied to each item. <br/><p>This property may be specified as an object containing margins to apply in the format:</p><pre><code>{ top: (top margin), right: (right margin), bottom: (bottom margin), left: (left margin) }</code></pre><p>This property may also be specified as a string containing space-separated, numeric margin values. The order of the sides associated with each value matches the way CSS processes margin values:</p><div class="mdetail-params"><ul><li>If there is only one value, it applies to all sides.</li><li>If there are two values, the top and bottom borders are set to the first value and the right and left are set to the second.</li><li>If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third.</li><li>If there are four values, they apply to the top, right, bottom, and left, respectively.</li></ul></div><p>Defaults to:</p><pre><code>{top:0, right:0, bottom:0, left:0} </code></pre>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='defaultMargins'>
          <xs:annotation>
            <xs:documentation>
              If the individual contained items do not have a <tt>margins</tt> property specified, the default margins from this property will be applied to each item. <br/><p>This property may be specified as an object containing margins to apply in the format:</p><pre><code>{ top: (top margin), right: (right margin), bottom: (bottom margin), left: (left margin) }</code></pre><p>This property may also be specified as a string containing space-separated, numeric margin values. The order of the sides associated with each value matches the way CSS processes margin values:</p><div class="mdetail-params"><ul><li>If there is only one value, it applies to all sides.</li><li>If there are two values, the top and bottom borders are set to the first value and the right and left are set to the second.</li><li>If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third.</li><li>If there are four values, they apply to the top, right, bottom, and left, respectively.</li></ul></div><p>Defaults to:</p><pre><code>{top:0, right:0, bottom:0, left:0} </code></pre>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='padding'>
          <xs:annotation>
            <xs:documentation>
              Sets the padding to be applied to all child items managed by this layout. <p>This property must be specified as a string containing space-separated, numeric padding values. The order of the sides associated with each value matches the way CSS processes padding values:</p><div class="mdetail-params"><ul><li>If there is only one value, it applies to all sides.</li><li>If there are two values, the top and bottom borders are set to the first value and the right and left are set to the second.</li><li>If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third.</li><li>If there are four values, they apply to the top, right, bottom, and left, respectively.</li></ul></div><p>Defaults to: <code>"0"</code></p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='BoxLayout' type='el:BoxLayout_TYPE' substitutionGroup='el:ContainerLayout'>
    <xs:annotation>
      <xs:documentation>
        Base Class for HBoxLayout and VBoxLayout Classes. Generally it should not need to be used directly. <p>This class serves as a typed config object for constructor of class BoxLayout.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.BoxLayout
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='CardLayout_TYPE'>
    <xs:complexContent>
      <xs:extension base='el:FitLayout_TYPE'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:Boolean' name='deferredRender'>
          <xs:annotation>
            <xs:documentation>
              True to render each contained item at the time it becomes active, false to render all contained items as soon as the layout is rendered (defaults to false). If there is a significant amount of content or a lot of heavy controls being rendered into panels that are not displayed by default, setting this to true might improve performance.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='layoutOnCardChange'>
          <xs:annotation>
            <xs:documentation>
              True to force a layout of the active item when the active card is changed. Defaults to false.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='CardLayout' type='el:CardLayout_TYPE' substitutionGroup='el:FitLayout'>
    <xs:annotation>
      <xs:documentation>
        This layout manages multiple child Components, each fitted to the Container, where only a single child Component can be visible at any given time. This layout style is most commonly used for wizards, tab implementations, etc. This class is intended to be extended or created via the layout:'card' <a href="output/Ext.Container.html#Ext.Container-layout">Ext.Container.layout</a> config, and should generally not need to be created directly via the new keyword. <p>The CardLayout's focal method is <a href="output/Ext.layout.CardLayout.html#Ext.layout.CardLayout-setActiveItem">setActiveItem</a>. Since only one panel is displayed at a time, the only way to move from one Component to the next is by calling setActiveItem, passing the id or index of the next panel to display. The layout itself does not provide a user interface for handling this navigation, so that functionality must be provided by the developer.</p><p>In the following example, a simplistic wizard setup is demonstrated. A button bar is added to the footer of the containing panel to provide navigation buttons. The buttons will be handled by a common navigation routine -- for this example, the implementation of that routine has been omitted since it can be any type of custom logic. Note that other uses of a CardLayout (like a tab control) would require a completely different implementation. For serious implementations, a better approach would be to extend CardLayout to provide the custom functionality needed. Example usage:</p><pre><code>var navHandler = function(direction){ // This routine could contain business logic required to manage the navigation steps. // It would call setActiveItem as needed, manage navigation button state, handle any // branching logic that might be required, handle alternate actions like cancellation // or finalization, etc. A complete wizard implementation could get pretty // sophisticated depending on the complexity required, and should probably be // done as a subclass of CardLayout in a real-world implementation. }; var card = new Ext.Panel({ title: 'Example Wizard', layout:'card', activeItem: 0, // make sure the active item is set on the container config! bodyStyle: 'padding:15px', defaults: { // applied to each contained panel border:false }, // just an example of one possible navigation scheme, using buttons bbar: [ { id: 'move-prev', text: 'Back', handler: navHandler.createDelegate(this, [-1]), disabled: true }, '-&gt;', // greedy spacer so that the buttons are aligned to each side { id: 'move-next', text: 'Next', handler: navHandler.createDelegate(this, [1]) } ], // the panels (or "cards") within the layout items: [{ id: 'card-0', html: '&lt;h1&gt;Welcome to the Wizard!&lt;/h1&gt;&lt;p&gt;Step 1 of 3&lt;/p&gt;' },{ id: 'card-1', html: '&lt;p&gt;Step 2 of 3&lt;/p&gt;' },{ id: 'card-2', html: '&lt;h1&gt;Congratulations!&lt;/h1&gt;&lt;p&gt;Step 3 of 3 - Complete&lt;/p&gt;' }] }); </code></pre> <p>This class serves as a typed config object for constructor of class CardLayout.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.CardLayout
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ColumnLayout_TYPE'>
    <xs:complexContent>
      <xs:extension base='el:ContainerLayout_TYPE'>
        <xs:sequence>
        </xs:sequence>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='ColumnLayout' type='el:ColumnLayout_TYPE' substitutionGroup='el:ContainerLayout'>
    <xs:annotation>
      <xs:documentation>
        This is the layout style of choice for creating structural layouts in a multi-column format where the width of each column can be specified as a percentage or fixed width, but the height is allowed to vary based on the content. This class is intended to be extended or created via the layout:'column' <a href="output/Ext.Container.html#Ext.Container-layout">Ext.Container.layout</a> config, and should generally not need to be created directly via the new keyword. <p>ColumnLayout does not have any direct config options (other than inherited ones), but it does support a specific config property of <b><tt>columnWidth</tt></b> that can be included in the config of any panel added to it. The layout will use the columnWidth (if present) or width of each panel during layout to determine how to size each panel. If width or columnWidth is not specified for a given panel, its width will default to the panel's width (or auto).</p><p>The width property is always evaluated as pixels, and must be a number greater than or equal to 1. The columnWidth property is always evaluated as a percentage, and must be a decimal value greater than 0 and less than 1 (e.g., .25).</p><p>The basic rules for specifying column widths are pretty simple. The logic makes two passes through the set of contained panels. During the first layout pass, all panels that either have a fixed width or none specified (auto) are skipped, but their widths are subtracted from the overall container width. During the second pass, all panels with columnWidths are assigned pixel widths in proportion to their percentages based on the total <b>remaining</b> container width. In other words, percentage width panels are designed to fill the space left over by all the fixed-width and/or auto-width panels. Because of this, while you can specify any number of columns with different percentages, the columnWidths must always add up to 1 (or 100%) when added together, otherwise your layout may not render as expected. Example usage:</p><pre><code>// All columns are percentages -- they must add up to 1 var p = new Ext.Panel({ title: 'Column Layout - Percentage Only', layout:'column', items: [{ title: 'Column 1', columnWidth: .25 },{ title: 'Column 2', columnWidth: .6 },{ title: 'Column 3', columnWidth: .15 }] }); // Mix of width and columnWidth -- all columnWidth values must add up // to 1. The first column will take up exactly 120px, and the last two // columns will fill the remaining container width. var p = new Ext.Panel({ title: 'Column Layout - Mixed', layout:'column', items: [{ title: 'Column 1', width: 120 },{ title: 'Column 2', columnWidth: .8 },{ title: 'Column 3', columnWidth: .2 }] }); </code></pre> <p>This class serves as a typed config object for constructor of class ColumnLayout.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.ColumnLayout
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ContainerLayout_TYPE'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='extraCls'>
          <xs:annotation>
            <xs:documentation>
              An optional extra CSS class that will be added to the container. This can be useful for adding customized styles to the container or any of its children using standard CSS rules. See <a href="Ext.Component.html">Ext.Component</a>.<a href="output/Ext.Component.html#Ext.Component-ctCls">ctCls</a> also. <p><b>Note</b>: <tt>extraCls</tt> defaults to <tt>''</tt> except for the following classes which assign a value by default:</p><div class="mdetail-params"><ul><li><a href="Ext.layout.AbsoluteLayout.html">Absolute Layout</a> : <tt>'x-abs-layout-item'</tt></li><li><a href="Ext.layout.Box.html">Box Layout</a> : <tt>'x-box-item'</tt></li><li><a href="Ext.layout.ColumnLayout.html">Column Layout</a> : <tt>'x-column'</tt></li></ul></div>To configure the above Classes with an extra CSS class append to the default. For example, for ColumnLayout:<pre><code>extraCls: 'x-column custom-class' </code></pre><br/><br/>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='renderHidden'>
          <xs:annotation>
            <xs:documentation>
              True to hide each contained item on render (defaults to false).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
  </xs:complexType>
  <xs:element name='ContainerLayout' type='el:ContainerLayout_TYPE'>
    <xs:annotation>
      <xs:documentation>
        This class is intended to be extended or created via the <tt><b><a href="output/Ext.Container.html#Ext.Container-layout">layout</a></b></tt> configuration property. See <tt><b><a href="output/Ext.Container.html#Ext.Container-layout">Ext.Container.layout</a></b></tt> for additional details. <p>This class serves as a typed config object for constructor of class ContainerLayout.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.ContainerLayout
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='FitLayout_TYPE'>
    <xs:complexContent>
      <xs:extension base='el:ContainerLayout_TYPE'>
        <xs:sequence>
        </xs:sequence>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='FitLayout' type='el:FitLayout_TYPE' substitutionGroup='el:ContainerLayout'>
    <xs:annotation>
      <xs:documentation>
        This is a base class for layouts that contain <b>a single item</b> that automatically expands to fill the layout's container. This class is intended to be extended or created via the <tt>layout:'fit'</tt> <a href="output/Ext.Container.html#Ext.Container-layout">Ext.Container.layout</a> config, and should generally not need to be created directly via the new keyword. <p>FitLayout does not have any direct config options (other than inherited ones). To fit a panel to a container using FitLayout, simply set layout:'fit' on the container and add a single panel to it. If the container has multiple panels, only the first one will be displayed. Example usage:</p><pre><code>var p = new Ext.Panel({ title: 'Fit Layout', layout:'fit', items: { title: 'Inner Panel', html: '&lt;p&gt;This is the inner panel content&lt;/p&gt;', border: false } }); </code></pre> <p>This class serves as a typed config object for constructor of class FitLayout.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.FitLayout
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='FormLayout_TYPE'>
    <xs:complexContent>
      <xs:extension base='el:AnchorLayout_TYPE'>
        <xs:sequence>
            <xs:element name='fieldTpl' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  A <a href="output/Ext.Template.html#Ext.Template-compile">compile</a>d <a href="Ext.Template.html">Ext.Template</a> for rendering the fully wrapped, labeled and styled form Field. Defaults to:<br/><br/><pre><code>new Ext.Template( '&lt;div class="x-form-item {itemCls}" tabIndex="-1"&gt;', '&lt;label for="{id}" style="{labelStyle}" class="x-form-item-label"&gt;{label}{labelSeparator}&lt;/label&gt;', '&lt;div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}"&gt;', '&lt;/div&gt;&lt;div class="{clearCls}"&gt;&lt;/div&gt;', '&lt;/div&gt;' ); </code></pre><p>This may be specified to produce a different DOM structure when rendering form Fields.</p><p>A description of the properties within the template follows:</p><div class="mdetail-params"><ul><li><b><tt>itemCls</tt></b> : String<div class="sub-desc">The CSS class applied to the outermost div wrapper that contains this field label and field element (the default class is <tt>'x-form-item'</tt> and <tt>itemCls</tt> will be added to that). If supplied, <tt>itemCls</tt> at the field level will override the default <tt>itemCls</tt> supplied at the container level.</div></li><li><b><tt>id</tt></b> : String<div class="sub-desc">The id of the Field</div></li><li><b><tt><a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-labelStyle">labelStyle</a></tt></b> : String<div class="sub-desc">A CSS style specification string to add to the field label for this field (defaults to <tt>''</tt> or the <a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-labelStyle">layout's value for <tt>labelStyle</tt></a>).</div></li><li><b><tt>label</tt></b> : String<div class="sub-desc">The text to display as the label for this field (defaults to <tt>''</tt>)</div></li><li><b><tt><a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-labelSeparator">labelSeparator</a></tt></b> : String<div class="sub-desc">The separator to display after the text of the label for this field (defaults to a colon <tt>':'</tt> or the <a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-labelSeparator">layout's value for labelSeparator</a>). To hide the separator use empty string ''.</div></li><li><b><tt>elementStyle</tt></b> : String<div class="sub-desc">The styles text for the input element's wrapper.</div></li><li><b><tt>clearCls</tt></b> : String<div class="sub-desc">The CSS class to apply to the special clearing div rendered directly after each form field wrapper (defaults to <tt>'x-form-clear-left'</tt>)</div></li></ul></div><p>Also see <tt><a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-getTemplateArgs">getTemplateArgs</a></tt></p>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:String' name='fieldTpl'>
          <xs:annotation>
            <xs:documentation>
              A <a href="output/Ext.Template.html#Ext.Template-compile">compile</a>d <a href="Ext.Template.html">Ext.Template</a> for rendering the fully wrapped, labeled and styled form Field. Defaults to:<br/><br/><pre><code>new Ext.Template( '&lt;div class="x-form-item {itemCls}" tabIndex="-1"&gt;', '&lt;label for="{id}" style="{labelStyle}" class="x-form-item-label"&gt;{label}{labelSeparator}&lt;/label&gt;', '&lt;div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}"&gt;', '&lt;/div&gt;&lt;div class="{clearCls}"&gt;&lt;/div&gt;', '&lt;/div&gt;' ); </code></pre><p>This may be specified to produce a different DOM structure when rendering form Fields.</p><p>A description of the properties within the template follows:</p><div class="mdetail-params"><ul><li><b><tt>itemCls</tt></b> : String<div class="sub-desc">The CSS class applied to the outermost div wrapper that contains this field label and field element (the default class is <tt>'x-form-item'</tt> and <tt>itemCls</tt> will be added to that). If supplied, <tt>itemCls</tt> at the field level will override the default <tt>itemCls</tt> supplied at the container level.</div></li><li><b><tt>id</tt></b> : String<div class="sub-desc">The id of the Field</div></li><li><b><tt><a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-labelStyle">labelStyle</a></tt></b> : String<div class="sub-desc">A CSS style specification string to add to the field label for this field (defaults to <tt>''</tt> or the <a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-labelStyle">layout's value for <tt>labelStyle</tt></a>).</div></li><li><b><tt>label</tt></b> : String<div class="sub-desc">The text to display as the label for this field (defaults to <tt>''</tt>)</div></li><li><b><tt><a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-labelSeparator">labelSeparator</a></tt></b> : String<div class="sub-desc">The separator to display after the text of the label for this field (defaults to a colon <tt>':'</tt> or the <a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-labelSeparator">layout's value for labelSeparator</a>). To hide the separator use empty string ''.</div></li><li><b><tt>elementStyle</tt></b> : String<div class="sub-desc">The styles text for the input element's wrapper.</div></li><li><b><tt>clearCls</tt></b> : String<div class="sub-desc">The CSS class to apply to the special clearing div rendered directly after each form field wrapper (defaults to <tt>'x-form-clear-left'</tt>)</div></li></ul></div><p>Also see <tt><a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-getTemplateArgs">getTemplateArgs</a></tt></p>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='labelSeparator'>
          <xs:annotation>
            <xs:documentation>
              See <a href="Ext.form.FormPanel.html">Ext.form.FormPanel</a>.<a href="output/Ext.form.FormPanel.html#Ext.form.FormPanel-labelSeparator">labelSeparator</a>. Configuration of this property at the <b>container</b> level takes precedence.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Boolean' name='trackLabels'>
          <xs:annotation>
            <xs:documentation>
              True to show/hide the field label when the field is hidden. Defaults to <tt>true</tt>.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='FormLayout' type='el:FormLayout_TYPE' substitutionGroup='el:AnchorLayout'>
    <xs:annotation>
      <xs:documentation>
        This layout manager is specifically designed for rendering and managing child Components of <a href="Ext.form.FormPanel.html">forms</a>. It is responsible for rendering the labels of <a href="Ext.form.Field.html">Field</a>s. <p>This layout manager is used when a Container is configured with the <tt>layout:'form'</tt> <a href="output/Ext.Container.html#Ext.Container-layout">layout</a> config option, and should generally not need to be created directly via the new keyword. See <tt><b><a href="output/Ext.Container.html#Ext.Container-layout">Ext.Container.layout</a></b></tt> for additional details.</p><p>In an application, it will usually be preferable to use a <a href="Ext.form.FormPanel.html">FormPanel</a> (which is configured with FormLayout as its layout class by default) since it also provides built-in functionality for <a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-doAction">loading, validating and submitting</a> the form.</p><p>A <a href="Ext.Container.html">Container</a> <i>using</i> the FormLayout layout manager (e.g. <a href="Ext.form.FormPanel.html">Ext.form.FormPanel</a> or specifying <tt>layout:'form'</tt>) can also accept the following layout-specific config properties:</p><div class="mdetail-params"><ul><li><b><tt><a href="output/Ext.form.FormPanel.html#Ext.form.FormPanel-hideLabels">hideLabels</a></tt></b></li><li><b><tt><a href="output/Ext.form.FormPanel.html#Ext.form.FormPanel-labelAlign">labelAlign</a></tt></b></li><li><b><tt><a href="output/Ext.form.FormPanel.html#Ext.form.FormPanel-labelPad">labelPad</a></tt></b></li><li><b><tt><a href="output/Ext.form.FormPanel.html#Ext.form.FormPanel-labelSeparator">labelSeparator</a></tt></b></li><li><b><tt><a href="output/Ext.form.FormPanel.html#Ext.form.FormPanel-labelWidth">labelWidth</a></tt></b></li></ul></div><br/><br/> <p>Any Component (including Fields) managed by FormLayout accepts the following as a config option:</p><div class="mdetail-params"><ul><li><b><tt><a href="output/Ext.Component.html#Ext.Component-anchor">anchor</a></tt></b></li></ul></div><br/><br/> <p>Any Component managed by FormLayout may be rendered as a form field (with an associated label) by configuring it with a non-null <b><tt><a href="output/Ext.Component.html#Ext.Component-fieldLabel">fieldLabel</a></tt></b>. Components configured in this way may be configured with the following options which affect the way the FormLayout renders them:</p><div class="mdetail-params"><ul><li><b><tt><a href="output/Ext.Component.html#Ext.Component-clearCls">clearCls</a></tt></b></li><li><b><tt><a href="output/Ext.Component.html#Ext.Component-fieldLabel">fieldLabel</a></tt></b></li><li><b><tt><a href="output/Ext.Component.html#Ext.Component-hideLabel">hideLabel</a></tt></b></li><li><b><tt><a href="output/Ext.Component.html#Ext.Component-itemCls">itemCls</a></tt></b></li><li><b><tt><a href="output/Ext.Component.html#Ext.Component-labelSeparator">labelSeparator</a></tt></b></li><li><b><tt><a href="output/Ext.Component.html#Ext.Component-labelStyle">labelStyle</a></tt></b></li></ul></div><br/><br/> <p>Example usage:</p><pre><code>// Required if showing validation messages Ext.QuickTips.init(); // While you can create a basic Panel with layout:'form', practically // you should usually use a FormPanel to also get its form functionality // since it already creates a FormLayout internally. var form = new Ext.form.FormPanel({ title: 'Form Layout', bodyStyle: 'padding:15px', width: 350, defaultType: 'textfield', defaults: { // applied to each contained item width: 230, msgTarget: 'side' }, items: [{ fieldLabel: 'First Name', name: 'first', allowBlank: false, <a href="output/Ext.Component.html#Ext.Component-labelSeparator">labelSeparator</a>: ':' // override labelSeparator layout config },{ fieldLabel: 'Last Name', name: 'last' },{ fieldLabel: 'Email', name: 'email', vtype:'email' }, { xtype: 'textarea', hideLabel: true, // override hideLabels layout config name: 'msg', anchor: '100% -53' } ], buttons: [ {text: 'Save'}, {text: 'Cancel'} ], layoutConfig: { <a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-labelSeparator">labelSeparator</a>: '~' // superseded by assignment below }, // config options applicable to container when layout='form': hideLabels: false, labelAlign: 'left', // or 'right' or 'top' <a href="output/Ext.form.FormPanel.html#Ext.form.FormPanel-labelSeparator">labelSeparator</a>: '&gt;&gt;', // takes precedence over layoutConfig value labelWidth: 65, // defaults to 100 labelPad: 8 // defaults to 5, must specify labelWidth to be honored }); </code></pre> <p>This class serves as a typed config object for constructor of class FormLayout.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.FormLayout
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='HBoxLayout_TYPE'>
    <xs:complexContent>
      <xs:extension base='el:BoxLayout_TYPE'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='align'>
          <xs:annotation>
            <xs:documentation>
              Controls how the child items of the container are aligned. Acceptable configuration values for this property are: <div class="mdetail-params"><ul><li><b><tt>top</tt></b> : <b>Default</b><div class="sub-desc">child items are aligned vertically at the <b>top</b> of the container</div></li><li><b><tt>middle</tt></b> : <div class="sub-desc">child items are aligned vertically in the <b>middle</b> of the container</div></li><li><b><tt>stretch</tt></b> : <div class="sub-desc">child items are stretched vertically to fill the height of the container</div></li><li><b><tt>stretchmax</tt></b> : <div class="sub-desc">child items are stretched vertically to the height of the largest item.</div></li></ul></div>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='flex'>
          <xs:annotation>
            <xs:documentation>
              This configuation option is to be applied to <b>child <tt>items</tt></b> of the container managed by this layout. Each child item with a <tt>flex</tt> property will be flexed <b>horizontally</b> according to each item's <b>relative</b> <tt>flex</tt> value compared to the sum of all items with a <tt>flex</tt> value specified. Any child items that have either a <tt>flex = 0</tt> or <tt>flex = undefined</tt> will not be 'flexed' (the initial size will not be changed).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='pack'>
          <xs:annotation>
            <xs:documentation>
              Controls how the child items of the container are packed together. Acceptable configuration values for this property are: <div class="mdetail-params"><ul><li><b><tt>start</tt></b> : <b>Default</b><div class="sub-desc">child items are packed together at <b>left</b> side of container</div></li><li><b><tt>center</tt></b> : <div class="sub-desc">child items are packed together at <b>mid-width</b> of container</div></li><li><b><tt>end</tt></b> : <div class="sub-desc">child items are packed together at <b>right</b> side of container</div></li></ul></div>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='HBoxLayout' type='el:HBoxLayout_TYPE' substitutionGroup='el:BoxLayout'>
    <xs:annotation>
      <xs:documentation>
        A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal space between child items containing a numeric <code>flex</code> configuration. This layout may also be used to set the heights of child items by configuring it with the <a href="output/Ext.layout.HBoxLayout.html#Ext.layout.HBoxLayout-align">align</a> option. <p>This class serves as a typed config object for constructor of class HBoxLayout.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.HBoxLayout
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='MenuLayout_TYPE'>
    <xs:complexContent>
      <xs:extension base='el:ContainerLayout_TYPE'>
        <xs:sequence>
        </xs:sequence>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='MenuLayout' type='el:MenuLayout_TYPE' substitutionGroup='el:ContainerLayout'>
    <xs:annotation>
      <xs:documentation>
        Layout manager used by <a href="Ext.menu.Menu.html">Ext.menu.Menu</a>. Generally this class should not need to be used directly. <p>This class serves as a typed config object for constructor of class MenuLayout.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.MenuLayout
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='TableLayout_TYPE'>
    <xs:complexContent>
      <xs:extension base='el:ContainerLayout_TYPE'>
        <xs:sequence>
            <xs:element name='tableAttrs' minOccurs="0" maxOccurs="1">
              <xs:annotation>
                <xs:documentation>
                  An object containing properties which are added to the <a href="Ext.DomHelper.html">DomHelper</a> specification used to create the layout's <tt>&lt;table&gt;</tt> element. Example: <pre><code>{ xtype: 'panel', layout: 'table', layoutConfig: { tableAttrs: { style: { width: '100%' } }, columns: 3 } }</code></pre>
                </xs:documentation>
              </xs:annotation>
              <xs:complexType>
                <xs:sequence>
                  <xs:any minOccurs="0" maxOccurs="unbounded" processContents="lax"/>
                </xs:sequence>
              </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attribute type='exml:Number' name='columns'>
          <xs:annotation>
            <xs:documentation>
              The total number of columns to create in the table for this layout. If not specified, all Components added to this layout will be rendered into a single row using one column per Component.
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='tableAttrs'>
          <xs:annotation>
            <xs:documentation>
              An object containing properties which are added to the <a href="Ext.DomHelper.html">DomHelper</a> specification used to create the layout's <tt>&lt;table&gt;</tt> element. Example: <pre><code>{ xtype: 'panel', layout: 'table', layoutConfig: { tableAttrs: { style: { width: '100%' } }, columns: 3 } }</code></pre>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='TableLayout' type='el:TableLayout_TYPE' substitutionGroup='el:ContainerLayout'>
    <xs:annotation>
      <xs:documentation>
        This layout allows you to easily render content into an HTML table. The total number of columns can be specified, and rowspan and colspan can be used to create complex layouts within the table. This class is intended to be extended or created via the layout:'table' <a href="output/Ext.Container.html#Ext.Container-layout">Ext.Container.layout</a> config, and should generally not need to be created directly via the new keyword. <p>Note that when creating a layout via config, the layout-specific config properties must be passed in via the <a href="output/Ext.Container.html#Ext.Container-layoutConfig">Ext.Container.layoutConfig</a> object which will then be applied internally to the layout. In the case of TableLayout, the only valid layout config property is <a href="output/Ext.layout.TableLayout.html#Ext.layout.TableLayout-columns">columns</a>. However, the items added to a TableLayout can supply the following table-specific config properties:</p><ul><li><b>rowspan</b> Applied to the table cell containing the item.</li><li><b>colspan</b> Applied to the table cell containing the item.</li><li><b>cellId</b> An id applied to the table cell containing the item.</li><li><b>cellCls</b> A CSS class name added to the table cell containing the item.</li></ul><p>The basic concept of building up a TableLayout is conceptually very similar to building up a standard HTML table. You simply add each panel (or "cell") that you want to include along with any span attributes specified as the special config properties of rowspan and colspan which work exactly like their HTML counterparts. Rather than explicitly creating and nesting rows and columns as you would in HTML, you simply specify the total column count in the layoutConfig and start adding panels in their natural order from left to right, top to bottom. The layout will automatically figure out, based on the column count, rowspans and colspans, how to position each panel within the table. Just like with HTML tables, your rowspans and colspans must add up correctly in your overall layout or you'll end up with missing and/or extra cells! Example usage:</p><pre><code>// This code will generate a layout table that is 3 columns by 2 rows // with some spanning included. The basic layout will be: // +--------+-----------------+ // | A | B | // | |--------+--------| // | | C | D | // +--------+--------+--------+ var table = new Ext.Panel({ title: 'Table Layout', layout:'table', defaults: { // applied to each contained panel bodyStyle:'padding:20px' }, layoutConfig: { // The total column count must be specified here columns: 3 }, items: [{ html: '&lt;p&gt;Cell A content&lt;/p&gt;', rowspan: 2 },{ html: '&lt;p&gt;Cell B content&lt;/p&gt;', colspan: 2 },{ html: '&lt;p&gt;Cell C content&lt;/p&gt;', cellCls: 'highlight' },{ html: '&lt;p&gt;Cell D content&lt;/p&gt;' }] }); </code></pre> <p>This class serves as a typed config object for constructor of class TableLayout.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.TableLayout
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='ToolbarLayout_TYPE'>
    <xs:complexContent>
      <xs:extension base='el:ContainerLayout_TYPE'>
        <xs:sequence>
        </xs:sequence>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='ToolbarLayout' type='el:ToolbarLayout_TYPE' substitutionGroup='el:ContainerLayout'>
    <xs:annotation>
      <xs:documentation>
        Layout manager used by Ext.Toolbar. This is highly specialised for use by Toolbars and would not usually be used by any other class. <p>This class serves as a typed config object for constructor of class ToolbarLayout.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.ToolbarLayout
      </xs:documentation>
    </xs:annotation>
  </xs:element>
  <xs:complexType name='VBoxLayout_TYPE'>
    <xs:complexContent>
      <xs:extension base='el:BoxLayout_TYPE'>
        <xs:sequence>
        </xs:sequence>
        <xs:attribute type='exml:String' name='align'>
          <xs:annotation>
            <xs:documentation>
              Controls how the child items of the container are aligned. Acceptable configuration values for this property are: <div class="mdetail-params"><ul><li><b><tt>left</tt></b> : <b>Default</b><div class="sub-desc">child items are aligned horizontally at the <b>left</b> side of the container</div></li><li><b><tt>center</tt></b> : <div class="sub-desc">child items are aligned horizontally at the <b>mid-width</b> of the container</div></li><li><b><tt>stretch</tt></b> : <div class="sub-desc">child items are stretched horizontally to fill the width of the container</div></li><li><b><tt>stretchmax</tt></b> : <div class="sub-desc">child items are stretched horizontally to the size of the largest item.</div></li></ul></div>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:Number' name='flex'>
          <xs:annotation>
            <xs:documentation>
              This configuation option is to be applied to <b>child <tt>items</tt></b> of the container managed by this layout. Each child item with a <tt>flex</tt> property will be flexed <b>vertically</b> according to each item's <b>relative</b> <tt>flex</tt> value compared to the sum of all items with a <tt>flex</tt> value specified. Any child items that have either a <tt>flex = 0</tt> or <tt>flex = undefined</tt> will not be 'flexed' (the initial size will not be changed).
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:attribute type='exml:String' name='pack'>
          <xs:annotation>
            <xs:documentation>
              Controls how the child items of the container are packed together. Acceptable configuration values for this property are: <div class="mdetail-params"><ul><li><b><tt>start</tt></b> : <b>Default</b><div class="sub-desc">child items are packed together at <b>top</b> side of container</div></li><li><b><tt>center</tt></b> : <div class="sub-desc">child items are packed together at <b>mid-height</b> of container</div></li><li><b><tt>end</tt></b> : <div class="sub-desc">child items are packed together at <b>bottom</b> side of container</div></li></ul></div>
            </xs:documentation>
          </xs:annotation>
        </xs:attribute>
        <xs:anyAttribute namespace="http://www.jangaroo.net/exml/0.8 exml:untyped" processContents="skip"/>
      </xs:extension>
    </xs:complexContent>
  </xs:complexType>
  <xs:element name='VBoxLayout' type='el:VBoxLayout_TYPE' substitutionGroup='el:BoxLayout'>
    <xs:annotation>
      <xs:documentation>
        A layout that arranges items vertically down a Container. This layout optionally divides available vertical space between child items containing a numeric <code>flex</code> configuration. This layout may also be used to set the widths of child items by configuring it with the <a href="output/Ext.layout.VBoxLayout.html#Ext.layout.VBoxLayout-align">align</a> option. <p>This class serves as a typed config object for constructor of class VBoxLayout.</p> <p>Copyright &#169; 2011 Sencha Inc.</p> @see ext.layout.VBoxLayout
      </xs:documentation>
    </xs:annotation>
  </xs:element>
</xs:schema>
New to GrepCode? Check out our FAQ X