Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / examples / layout-browser / layout-browser.html
index a371e2e..92b0035 100644 (file)
-<html>\r
-<head>\r
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />\r
-    <title>ExtJS Layout Examples</title>\r
-\r
-    <!-- ** CSS ** -->\r
-    <!-- base library -->\r
-    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />\r
-\r
-    <!-- overrides to base library -->\r
-    <link rel="stylesheet" type="text/css" href="../ux/css/CenterLayout.css" />\r
-\r
-    <!-- page specific -->\r
-    <link rel="stylesheet" type="text/css" href="layout-browser.css">\r
-\r
-    <!-- ** Javascript ** -->\r
-    <!-- ExtJS library: base/adapter -->\r
-    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>\r
-\r
-    <!-- ExtJS library: all widgets -->\r
-    <script type="text/javascript" src="../../ext-all.js"></script>\r
-\r
-    <!-- overrides to base library -->\r
-\r
-    <!-- extensions -->\r
-    <script type="text/javascript" src="../ux/CenterLayout.js"></script>\r
-    <script type="text/javascript" src="../ux/RowLayout.js"></script>\r
-\r
-    <!-- page specific -->\r
-    <script type="text/javascript" src="layouts/basic.js"></script>\r
-    <script type="text/javascript" src="layouts/custom.js"></script>\r
-    <script type="text/javascript" src="layouts/combination.js"></script>\r
-    <script type="text/javascript" src="layout-browser.js"></script>\r
-\r
-</head>\r
-<body>\r
-    <div id="header"><h1>Ext Layout Browser</h1></div>\r
-    <div style="display:none;">\r
-\r
-        <!-- Start page content -->\r
-        <div id="start-div">\r
-            <div style="float:left;" ><img src="images/layout-icon.gif" /></div>\r
-            <div style="margin-left:100px;">\r
-                <h2>Welcome!</h2>\r
-                <p>There are many sample layouts to choose from that should give you a good head start in building your own\r
-                application layout.  Just like the combination examples, you can mix and match most layouts as\r
-                needed, so don't be afraid to experiment!</p>\r
-                <p>Select a layout from the tree to the left to begin.</p>\r
-            </div>\r
-        </div>\r
-\r
-        <!-- Basic layouts -->\r
-        <div id="absolute-details">\r
-            <h2>Ext.layout.AbsoluteLayout</h2>\r
-            <p>This is a simple layout style that allows you to position items within a container using\r
-            CSS-style absolute positioning via XY coordinates.</p>\r
-            <p><b>Sample Config:</b></p>\r
-            <pre><code>\r
-layout: 'absolute',\r
-items:[{\r
-    title: 'Panel 1',\r
-    x: 50,\r
-    y: 50,\r
-    html: 'Positioned at x:50, y:50'\r
-}]\r
-            </code></pre>\r
-            <p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.layout.AbsoluteLayout" target="_blank">API Reference</a></p>\r
-        </div>\r
-        <div id="accordion-details">\r
-            <h2>Ext.layout.Accordion</h2>\r
-            <p>Displays one panel at a time in a stacked layout.  No special config properties are required other\r
-            than the layout &mdash; all panels added to the container will be converted to accordion panels.</p>\r
-            <p><b>Sample Config:</b></p>\r
-            <pre><code>\r
-layout: 'accordion',\r
-items:[{\r
-    title: 'Panel 1',\r
-    html: 'Content'\r
-},{\r
-    title: 'Panel 2',\r
-    id: 'panel2',\r
-    html: 'Content'\r
-}]\r
-            </code></pre>\r
-            <p>You can easily customize individual accordion panels by adding styles scoped to the panel by class or id.\r
-            For example, to style the panel with id 'panel2' above you could add rules like this:</p>\r
-            <pre><code>\r
-#panel2 .x-panel-body {\r
-    background:#ffe;\r
-    color:#15428B;\r
-}\r
-#panel2 .x-panel-header-text {\r
-    color:#555;\r
-}\r
-            </code></pre>\r
-            <p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.layout.Accordion" target="_blank">API Reference</a></p>\r
-        </div>\r
-        <div id="anchor-details">\r
-            <h2>Ext.layout.AnchorLayout</h2>\r
-            <p>Provides anchoring of contained items to the container's edges.  This type of layout is most commonly\r
-            seen within FormPanels (or any container with a FormLayout) where fields are sized relative to the\r
-            container without hard-coding their dimensions.</p>\r
-            <p>In this example, panels are anchored for example purposes so that you can easily see the effect.\r
-            If you resize the browser window, the anchored panels will automatically resize to maintain the\r
-            same relative dimensions.</p>\r
-            <p><b>Sample Config:</b></p>\r
-            <pre><code>\r
-layout: 'anchor',\r
-items: [{\r
-    title: 'Panel 1',\r
-    height: 100,\r
-    anchor: '50%'\r
-},{\r
-    title: 'Panel 2',\r
-    height: 100,\r
-    anchor: '-100'\r
-},{\r
-    title: 'Panel 3',\r
-    anchor: '-10, -262'\r
-}]\r
-            </code></pre>\r
-            <p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.layout.AnchorLayout" target="_blank">API Reference</a></p>\r
-        </div>\r
-        <div id="border-details">\r
-            <h2>Ext.layout.BorderLayout</h2>\r
-            <p>This Layout Browser page is already a border layout, and this example shows a separate border layout\r
-            nested within a region of the page's border layout.  Border layouts can be nested with just about any\r
-            level of complexity that you might need.</p>\r
-            <p>Every border layout <b>must</b> at least have a center region.  All other regions are optional.</p>\r
-            <p><b>Sample Config:</b></p>\r
-            <pre><code>\r
-layout:'border',\r
-defaults: {\r
-    collapsible: true,\r
-    split: true,\r
-    bodyStyle: 'padding:15px'\r
-},\r
-items: [{\r
-    title: 'Footer',\r
-    region: 'south',\r
-    height: 150,\r
-    minSize: 75,\r
-    maxSize: 250,\r
-    cmargins: '5 0 0 0'\r
-},{\r
-    title: 'Navigation',\r
-    region:'west',\r
-    margins: '5 0 0 0',\r
-    cmargins: '5 5 0 0',\r
-    width: 175,\r
-    minSize: 100,\r
-    maxSize: 250\r
-},{\r
-    title: 'Main Content',\r
-    collapsible: false,\r
-    region:'center',\r
-    margins: '5 0 0 0'\r
-}]\r
-            </code></pre>\r
-            <p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.layout.BorderLayout" target="_blank">API Reference</a></p>\r
-        </div>\r
-        <div id="card-tabs-details">\r
-            <h2>Ext.layout.CardLayout (TabPanel)</h2>\r
-            <p>The TabPanel component is an excellent example of a sophisticated card layout.  Each tab is just\r
-            a panel managed by the card layout such that only one is visible at a time.  In this case, configuration\r
-            is simple since we aren't actually building a card layout from scratch.  Don't forget to set the\r
-            activeItem config in order to default to the tab that should display first.</p>\r
-            <p><b>Sample Config:</b></p>\r
-            <pre><code>\r
-xtype: 'tabpanel',\r
-activeItem: 0, // index or id\r
-items:[{\r
-    title: 'Tab 1',\r
-    html: 'This is tab 1 content.'\r
-},{\r
-    title: 'Tab 2',\r
-    html: 'This is tab 2 content.'\r
-},{\r
-    title: 'Tab 3',\r
-    html: 'This is tab 3 content.'\r
-}]\r
-            </code></pre>\r
-            <p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.layout.CardLayout" target="_blank">CardLayout API Reference</a></p>\r
-            <p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.TabPanel" target="_blank">TabPanel API Reference</a></p>\r
-        </div>\r
-        <div id="card-wizard-details">\r
-            <h2>Ext.layout.CardLayout (Wizard)</h2>\r
-            <p>You can use a CardLayout to create your own custom wizard-style screen.  The layout is a standard\r
-            CardLayout with a Toolbar at the bottom, and the developer must supply the navigation function\r
-            that implements the wizard's business logic (see the code in basic.js for details).</p>\r
-            <p><b>Sample Config:</b></p>\r
-            <pre><code>\r
-layout:'card',\r
-activeItem: 0, // index or id\r
-bbar: ['->', {\r
-    id: 'card-prev',\r
-    text: '&amp;laquo; Previous'\r
-},{\r
-    id: 'card-next',\r
-    text: 'Next &amp;raquo;'\r
-}],\r
-items: [{\r
-    id: 'card-0',\r
-    html: 'Step 1'\r
-},{\r
-    id: 'card-1',\r
-    html: 'Step 2'\r
-},{\r
-    id: 'card-2',\r
-    html: 'Step 3'\r
-}]\r
-            </code></pre>\r
-            <p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.layout.CardLayout" target="_blank">API Reference</a></p>\r
-        </div>\r
-        <div id="column-details">\r
-            <h2>Ext.layout.ColumnLayout</h2>\r
-            <p>This is a useful layout style when you need multiple columns that can have varying content height.\r
-            Any fixed-width column widths are calculated first, then any percentage-width columns specified using\r
-            the <tt>columnWidth</tt> config will be calculated based on remaining container width.  Percentages\r
-            should add up to 1 (100%) in order to fill the container.</p>\r
-            <p><b>Sample Config:</b></p>\r
-            <pre><code>\r
-layout:'column',\r
-items: [{\r
-    title: 'Width = 25%',\r
-    columnWidth: .25,\r
-    html: 'Content'\r
-},{\r
-    title: 'Width = 75%',\r
-    columnWidth: .75,\r
-    html: 'Content'\r
-},{\r
-    title: 'Width = 250px',\r
-    width: 250,\r
-    html: 'Content'\r
-}]\r
-            </code></pre>\r
-            <p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.layout.ColumnLayout" target="_blank">API Reference</a></p>\r
-        </div>\r
-        <div id="fit-details">\r
-            <h2>Ext.layout.FitLayout</h2>\r
-            <p>A very simple layout that simply fills the container with a single panel.  This is usually the best default\r
-            layout choice when you have no other specific layout requirements.</p>\r
-            <p><b>Sample Config:</b></p>\r
-            <pre><code>\r
-layout:'fit',\r
-items: {\r
-    title: 'Fit Panel',\r
-    html: 'Content',\r
-    border: false\r
-}\r
-            </code></pre>\r
-            <p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.layout.FitLayout" target="_blank">API Reference</a></p>\r
-        </div>\r
-        <div id="form-details">\r
-            <h2>Ext.layout.FormLayout</h2>\r
-            <p>FormLayout has specific logic to deal with form fields, labels, etc.  While you can use a FormLayout in\r
-            a standard panel, you will normally want to use a FormPanel directly in order to get form-specific functionality\r
-            like validation, submission, etc.  FormPanels use a FormLayout internally so the layout config is not needed\r
-            (and the layout may not render correctly if overridden).</p>\r
-            <p><b>Sample Config:</b></p>\r
-            <pre><code>\r
-xtype: 'form', // FormPanel\r
-labelWidth: 75,\r
-width: 350,\r
-defaultType: 'textfield',\r
-items: [{\r
-        fieldLabel: 'First Name',\r
-        name: 'first',\r
-        allowBlank:false\r
-    },{\r
-        fieldLabel: 'Last Name',\r
-        name: 'last'\r
-    },{\r
-        fieldLabel: 'Company',\r
-        name: 'company'\r
-    },{\r
-        fieldLabel: 'Email',\r
-        name: 'email',\r
-        vtype:'email'\r
-    }\r
-],\r
-buttons: [\r
-    {text: 'Save'},\r
-    {text: 'Cancel'}\r
-]\r
-            </code></pre>\r
-            <p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.layout.FormLayout" target="_blank">API Reference</a></p>\r
-        </div>\r
-        <div id="table-details">\r
-            <h2>Ext.layout.TableLayout</h2>\r
-            <p>Outputs a standard HTML table as the layout container.  This is sometimes useful for complex layouts\r
-            where cell spanning is required, or when you want to allow the contents to flow naturally based on standard\r
-            browser table layout rules.</p>\r
-            <p><b>Sample Config:</b></p>\r
-            <pre><code>\r
-layout:'table',\r
-layoutConfig: {\r
-    columns: 3\r
-},\r
-items: [\r
-    {html:'1,1',rowspan:3},\r
-    {html:'1,2'},\r
-    {html:'1,3'},\r
-    {html:'2,2',colspan:2},\r
-    {html:'3,2'},\r
-    {html:'3,3'}\r
-]\r
-            </code></pre>\r
-            <p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.layout.TableLayout" target="_blank">API Reference</a></p>\r
-        </div>\r
-\r
-        <div id="vbox-details">\r
-            <h2>Ext.layout.VBoxLayout</h2>\r
-            <p>A layout that allows for the vertical and horizontal stretching of child items, much like the container\r
-            layout with size management.</p>\r
-            <p><b>Sample Config:</b></p>\r
-            <pre><code>\r
-layout:'vbox',\r
-layoutConfig: {\r
-    align : 'stretch',\r
-    pack  : 'start',\r
-},\r
-items: [\r
-    {html:'panel 1', flex:1},\r
-    {html:'panel 2', height:150},\r
-    {html:'panel 3', flex:2}\r
-]\r
-            </code></pre>\r
-            <p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.layout.VBoxLayout" target="_blank">API Reference</a></p>\r
-        </div>\r
-\r
-        <div id="hbox-details">\r
-            <h2>Ext.layout.HBoxLayout</h2>\r
-            <p>A layout that allows for the vertical and horizontal stretching of child items, much like the column\r
-            layout but can stretch items vertically.</p>\r
-            <p><b>Sample Config:</b></p>\r
-            <pre><code>\r
-layout:'hbox',\r
-layoutConfig: {\r
-    align : 'stretch',\r
-    pack  : 'start',\r
-},\r
-items: [\r
-    {html:'panel 1', flex:1},\r
-    {html:'panel 2', width:150},\r
-    {html:'panel 3', flex:2}\r
-]\r
-            </code></pre>\r
-            <p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.layout.HBoxLayout" target="_blank">API Reference</a></p>\r
-        </div>\r
-\r
-\r
-        <!-- Custom layouts -->\r
-        <div id="row-details">\r
-            <h2>Ext.ux.layout.RowLayout</h2>\r
-            <p>This is a custom layout that is useful when you need a layout style with multiple rows of content.\r
-            Any fixed-height rows are calculated first, then any percentage-height rows specified using the\r
-            <tt>rowHeight</tt> config will be calculated based on remaining container height.  Percentages\r
-            should add up to 1 (100%) in order to fill the container. Standard panel widths (fixed or\r
-            percentage) are also supported.</p>\r
-            <p><b>Sample Config:</b></p>\r
-            <pre><code>\r
-layout:'ux.row',\r
-items: [{\r
-    title: 'Height = 25%',\r
-    rowHeight: .25,\r
-    width: '50%'\r
-},{\r
-    title: 'Height = 100px',\r
-    height: 100,\r
-    width: 300\r
-},{\r
-    title: 'Height = 75%',\r
-    rowHeight: .75\r
-}]\r
-            </code></pre>\r
-        </div>\r
-        <div id="center-details">\r
-            <h2>Ext.ux.layout.CenterLayout</h2>\r
-            <p>This is a custom layout for centering contents within a container.  The only requirement is\r
-            that the container have a single child panel with a width specified (fixed or percentage).\r
-            The child panel can then contain  any content, including other components, that will display\r
-            centered within the main container. To make the centered panel non-visual, remove the title\r
-            and add <tt>border:false</tt> to the child config.</p>\r
-            <p><b>Sample Config:</b></p>\r
-            <pre><code>\r
-layout:'ux.center',\r
-items: {\r
-    title: 'Centered Panel',\r
-    width: '75%',\r
-    html: 'Some content'\r
-}\r
-            </code></pre>\r
-        </div>\r
-\r
-\r
-        <!-- Combination layouts -->\r
-        <div id="tabs-nested-layouts-details">\r
-            <h2>Tabs With Nested Layouts</h2>\r
-            <p>There are multiple levels of layout nesting within three different TabPanels in this example.\r
-            Each tab in a TabPanel can have its own separate layout.  As we can see, some have plain content,\r
-            while others contain full BorderLayouts.  There is also a fully-loaded grid nested down inside\r
-            the inner-most tab, showing that there is no limit to how complex your layout can be.</p>\r
-            <p>One of the trickiest aspects of deeply nested layouts is dealing with borders on all the\r
-            different panels used in the layout.  In this example, body padding and region margins are used\r
-            extensively to provide space between components so that borders can be displayed naturally in\r
-            most cases. A different approach would be to minimize padding and use the config properties\r
-            related to borders to turn borders on and off selectively to achieve a slightly different look\r
-            and feel.</p>\r
-        </div>\r
-        <div id="complex-details">\r
-            <h2>Complex Layout</h2>\r
-            <p></p>\r
-        </div>\r
-\r
-        <!-- Form layouts -->\r
-        <div id="abs-form-details">\r
-            <h2>Absolute Layout Form</h2>\r
-            <p>FormLayout supports absolute positioning in addition to standard anchoring for flexible control over\r
-            positioning of fields and labels in containers.  In this example, the top and left positions of the labels\r
-            and fields are positioned absolute, while the field widths are anchored to the right and/or bottom of the container.</p>\r
-        </div>\r
-    </div>\r
-</body>\r
-</html>\r
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <title>ExtJS Layout Examples</title>
+    <!-- Ext -->
+    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
+    <script type="text/javascript" src="../../bootstrap.js"></script>
+
+    <!-- example code -->
+
+    <link rel="stylesheet" type="text/css" href="../ux/css/CenterLayout.css" />
+    <link rel="stylesheet" type="text/css" href="layout-browser.css">
+
+    <!-- page specific -->
+    <script type="text/javascript" src="layouts/basic.js"></script>
+    <script type="text/javascript" src="layouts/custom.js"></script>
+    <script type="text/javascript" src="layouts/combination.js"></script>
+    <script type="text/javascript" src="layout-browser.js"></script>
+
+</head>
+<body>
+    <div style="display:none;">
+
+        <!-- Start page content -->
+        <div id="start-div">
+            <div style="float:left;" ><img src="images/layout-icon.gif" /></div>
+            <div style="margin-left:100px;">
+                <h2>Welcome!</h2>
+                <p>There are many sample layouts to choose from that should give you a good head start in building your own
+                application layout.  Just like the combination examples, you can mix and match most layouts as
+                needed, so don't be afraid to experiment!</p>
+                <p>Select a layout from the tree to the left to begin.</p>
+            </div>
+        </div>
+
+        <!-- Basic layouts -->
+        <div id="absolute-details">
+            <h2>Ext.layout.container.Absolute</h2>
+            <p>This is a simple layout style that allows you to position items within a container using
+            CSS-style absolute positioning via XY coordinates.</p>
+            <p><b>Sample Config:</b></p>
+            <pre><code>
+layout: 'absolute',
+items:[{
+    title: 'Panel 1',
+    x: 50,
+    y: 50,
+    html: 'Positioned at x:50, y:50'
+}]
+            </code></pre>
+            <p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Absolute" target="_blank">API Reference</a></p>
+        </div>
+        <div id="accordion-details">
+            <h2>Ext.layout.container.Accordion</h2>
+            <p>Displays one panel at a time in a stacked layout.  No special config properties are required other
+            than the layout &mdash; all panels added to the container will be converted to accordion panels.</p>
+            <p><b>Sample Config:</b></p>
+            <pre><code>
+layout: 'accordion',
+items:[{
+    title: 'Panel 1',
+    html: 'Content'
+},{
+    title: 'Panel 2',
+    id: 'panel2',
+    html: 'Content'
+}]
+            </code></pre>
+            <p>You can easily customize individual accordion panels by adding styles scoped to the panel by class or id.
+            For example, to style the panel with id 'panel2' above you could add rules like this:</p>
+            <pre><code>
+#panel2 .x-panel-body {
+    background:#ffe;
+    color:#15428B;
+}
+#panel2 .x-panel-header-text {
+    color:#555;
+}
+            </code></pre>
+            <p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Accordion" target="_blank">API Reference</a></p>
+        </div>
+        <div id="anchor-details">
+            <h2>Ext.layout.container.Anchor</h2>
+            <p>Provides anchoring of contained items to the container's edges.  This type of layout is most commonly
+            seen within FormPanels (or any container with a FormLayout) where fields are sized relative to the
+            container without hard-coding their dimensions.</p>
+            <p>In this example, panels are anchored for example purposes so that you can easily see the effect.
+            If you resize the browser window, the anchored panels will automatically resize to maintain the
+            same relative dimensions.</p>
+            <p><b>Sample Config:</b></p>
+            <pre><code>
+layout: 'anchor',
+items: [{
+    title: 'Panel 1',
+    height: 100,
+    anchor: '50%'
+},{
+    title: 'Panel 2',
+    height: 100,
+    anchor: '-100'
+},{
+    title: 'Panel 3',
+    anchor: '-10, -262'
+}]
+            </code></pre>
+            <p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Anchor" target="_blank">API Reference</a></p>
+        </div>
+        <div id="border-details">
+            <h2>Ext.layout.container.Border</h2>
+            <p>This Layout Browser page is already a border layout, and this example shows a separate border layout
+            nested within a region of the page's border layout.  Border layouts can be nested with just about any
+            level of complexity that you might need.</p>
+            <p>Every border layout <b>must</b> at least have a center region.  All other regions are optional.</p>
+            <p><b>Sample Config:</b></p>
+            <pre><code>
+layout:'border',
+defaults: {
+    collapsible: true,
+    split: true,
+    bodyStyle: 'padding:15px'
+},
+items: [{
+    title: 'Footer',
+    region: 'south',
+    height: 150,
+    minSize: 75,
+    maxSize: 250,
+    cmargins: '5 0 0 0'
+},{
+    title: 'Navigation',
+    region:'west',
+    margins: '5 0 0 0',
+    cmargins: '5 5 0 0',
+    width: 175,
+    minSize: 100,
+    maxSize: 250
+},{
+    title: 'Main Content',
+    collapsible: false,
+    region:'center',
+    margins: '5 0 0 0'
+}]
+            </code></pre>
+            <p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Border" target="_blank">API Reference</a></p>
+        </div>
+        <div id="card-tabs-details">
+            <h2>Ext.layout.container.Card (TabPanel)</h2>
+            <p>The TabPanel component is an excellent example of a sophisticated card layout.  Each tab is just
+            a panel managed by the card layout such that only one is visible at a time.  In this case, configuration
+            is simple since we aren't actually building a card layout from scratch.  Don't forget to set the
+            activeItem config in order to default to the tab that should display first.</p>
+            <p><b>Sample Config:</b></p>
+            <pre><code>
+xtype: 'tabpanel',
+activeTab: 0, // index or id
+items:[{
+    title: 'Tab 1',
+    html: 'This is tab 1 content.'
+},{
+    title: 'Tab 2',
+    html: 'This is tab 2 content.'
+},{
+    title: 'Tab 3',
+    html: 'This is tab 3 content.'
+}]
+            </code></pre>
+            <p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Card" target="_blank">Card layout API Reference</a></p>
+            <p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.tab.Panel" target="_blank">TabPanel API Reference</a></p>
+        </div>
+        <div id="card-wizard-details">
+            <h2>Ext.layout.container.Card (Wizard)</h2>
+            <p>You can use a Card layout to create your own custom wizard-style screen.  The layout is a standard
+            CardLayout with a Toolbar at the bottom, and the developer must supply the navigation function
+            that implements the wizard's business logic (see the code in basic.js for details).</p>
+            <p><b>Sample Config:</b></p>
+            <pre><code>
+layout:'card',
+activeItem: 0, // index or id
+bbar: ['->', {
+    id: 'card-prev',
+    text: '&amp;laquo; Previous'
+},{
+    id: 'card-next',
+    text: 'Next &amp;raquo;'
+}],
+items: [{
+    id: 'card-0',
+    html: 'Step 1'
+},{
+    id: 'card-1',
+    html: 'Step 2'
+},{
+    id: 'card-2',
+    html: 'Step 3'
+}]
+            </code></pre>
+            <p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Card" target="_blank">API Reference</a></p>
+        </div>
+        <div id="column-details">
+            <h2>Ext.layout.container.Column</h2>
+            <p>This is a useful layout style when you need multiple columns that can have varying content height.
+            Any fixed-width column widths are calculated first, then any percentage-width columns specified using
+            the <tt>columnWidth</tt> config will be calculated based on remaining container width.  Percentages
+            should add up to 1 (100%) in order to fill the container.</p>
+            <p><b>Sample Config:</b></p>
+            <pre><code>
+layout:'column',
+items: [{
+    title: 'Width = 25%',
+    columnWidth: .25,
+    html: 'Content'
+},{
+    title: 'Width = 75%',
+    columnWidth: .75,
+    html: 'Content'
+},{
+    title: 'Width = 250px',
+    width: 250,
+    html: 'Content'
+}]
+            </code></pre>
+            <p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Column" target="_blank">API Reference</a></p>
+        </div>
+        <div id="fit-details">
+            <h2>Ext.layout.container.Fit</h2>
+            <p>A very simple layout that simply fills the container with a single panel.  This is usually the best default
+            layout choice when you have no other specific layout requirements.</p>
+            <p><b>Sample Config:</b></p>
+            <pre><code>
+layout:'fit',
+items: {
+    title: 'Fit Panel',
+    html: 'Content',
+    border: false
+}
+            </code></pre>
+            <p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Fit" target="_blank">API Reference</a></p>
+        </div>
+        <div id="table-details">
+            <h2>Ext.layout.container.Table</h2>
+            <p>Outputs a standard HTML table as the layout container.  This is sometimes useful for complex layouts
+            where cell spanning is required, or when you want to allow the contents to flow naturally based on standard
+            browser table layout rules.</p>
+            <p><b>Sample Config:</b></p>
+            <pre><code>
+layout: {
+    type: 'table',
+    columns: 4
+},
+items: [
+    {html:'1,1',rowspan:3},
+    {html:'1,2'},
+    {html:'1,3'},
+    {html:'2,2',colspan:2},
+    {html:'3,2'},
+    {html:'3,3'}
+]
+            </code></pre>
+            <p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Table" target="_blank">API Reference</a></p>
+        </div>
+
+        <div id="vbox-details">
+            <h2>Ext.layout.container.VBox</h2>
+            <p>A layout that allows for the vertical and horizontal stretching of child items, much like the container
+            layout with size management.</p>
+            <p><b>Sample Config:</b></p>
+            <pre><code>
+layout: {
+    type: 'vbox'
+    align : 'stretch',
+    pack  : 'start',
+},
+items: [
+    {html:'panel 1', flex:1},
+    {html:'panel 2', height:150},
+    {html:'panel 3', flex:2}
+]
+            </code></pre>
+            <p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.VBox" target="_blank">API Reference</a></p>
+        </div>
+
+        <div id="hbox-details">
+            <h2>Ext.layout.container.HBox</h2>
+            <p>A layout that allows for the vertical and horizontal stretching of child items, much like the column
+            layout but can stretch items vertically.</p>
+            <p><b>Sample Config:</b></p>
+            <pre><code>
+layout: {
+    type: 'hbox',
+    pack: 'start',
+    align: 'stretch'
+},
+items: [
+    {html:'panel 1', flex:1},
+    {html:'panel 2', width:150},
+    {html:'panel 3', flex:2}
+]
+            </code></pre>
+            <p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.HBox" target="_blank">API Reference</a></p>
+        </div>
+
+
+        <!-- Custom layouts -->
+        <div id="center-details">
+            <h2>Ext.ux.layout.Center</h2>
+            <p>This is a custom layout for centering contents within a container.  The only requirement is
+            that the container have a single child panel with a fixed width or a percentage ratio specified.
+            The child panel can then contain  any content, including other components, that will display
+            centered within the main container. To make the centered panel non-visual, remove the title
+            and add <tt>border:false</tt> to the child config.</p>
+            <p><b>Sample Config:</b></p>
+            <pre><code>
+layout:'ux.center',
+items: {
+    title: 'Centered Panel',
+    widthRatio: 0.75,
+    html: 'Some content'
+}
+            </code></pre>
+        </div>
+
+
+        <!-- Combination layouts -->
+        <div id="tabs-nested-layouts-details">
+            <h2>Tabs With Nested Layouts</h2>
+            <p>There are multiple levels of layout nesting within three different TabPanels in this example.
+            Each tab in a TabPanel can have its own separate layout.  As we can see, some have plain content,
+            while others contain full BorderLayouts.  There is also a fully-loaded grid nested down inside
+            the inner-most tab, showing that there is no limit to how complex your layout can be.</p>
+            <p>One of the trickiest aspects of deeply nested layouts is dealing with borders on all the
+            different panels used in the layout.  In this example, body padding and region margins are used
+            extensively to provide space between components so that borders can be displayed naturally in
+            most cases. A different approach would be to minimize padding and use the config properties
+            related to borders to turn borders on and off selectively to achieve a slightly different look
+            and feel.</p>
+        </div>
+        <div id="complex-details">
+            <h2>Complex Layout</h2>
+            <p></p>
+        </div>
+
+        <!-- Form layouts -->
+        <div id="abs-form-details">
+            <h2>Absolute Layout Form</h2>
+            <p>FormLayout supports absolute positioning in addition to standard anchoring for flexible control over
+            positioning of fields and labels in containers.  In this example, the top and left positions of the labels
+            and fields are positioned absolute, while the field widths are anchored to the right and/or bottom of the container.</p>
+        </div>
+    </div>
+</body>
+</html>