<html>\r
<head>\r
- <title>Ext 2.0 Layout Examples</title>\r
- <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css">\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
- <!-- custom includes -->\r
- <link rel="stylesheet" type="text/css" href="layout-browser.css">\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
+\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
+ <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
+\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
+ <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
</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
+ <p>Displays one panel at a time in a stacked layout. No special config properties are required other\r
than the layout — all panels added to the container will be converted to accordion panels.</p>\r
<p><b>Sample Config:</b></p>\r
<pre><code>\r
title: 'Panel 1',\r
html: 'Content'\r
},{\r
- title: 'Panel 2,\r
+ title: 'Panel 2',\r
id: 'panel2',\r
html: 'Content'\r
}]\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
+ <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
<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
+ 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
</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
+\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 useful layout style when you need multiple rows of content. Any fixed-height rows are \r
- calculated first, then any percentage-height rows specified using the <tt>rowHeight</tt> config will\r
- be calculated based on remaining container height. Percentages should add up to 1 (100%) in order \r
- to fill the container. Standard panel widths (fixed or percentage) are also supported.</p>\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
</div>\r
<div id="center-details">\r
<h2>Ext.ux.layout.CenterLayout</h2>\r
- <p>A simple layout for centering contents within a container. The only requirement is that the container\r
- have a single child panel with a width specified (fixed or percentage). The child panel can then contain \r
- any content, including other components, that will display centered within the main container. To make the\r
- centered panel non-visual, remove the title and add <tt>border:false</tt> to the child config.</p>\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
}\r
</code></pre>\r
</div>\r
- \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. Each\r
- tab in a TabPanel can have its own separate layout. As we can see, some have plain content, while others contain\r
- full BorderLayouts. There is also a fully-loaded grid nested down inside the inner-most tab, showing that\r
- 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 different\r
- 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 most cases.\r
- A different approach would be to minimize padding and use the config properties related to borders to\r
- turn borders on and off selectively to achieve a slightly different look and feel.</p>\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
+\r
<!-- Form layouts -->\r
<div id="abs-form-details">\r
<h2>Absolute Layout Form</h2>\r
git.ithinksw.org / extjs.git / blobdiff