git.ithinksw.org / extjs.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
Upgrade to ExtJS 3.1.1 - Released 02/08/2010
[extjs.git] / examples / layout-browser / layout-browser.html
diff --git a/examples/layout-browser/layout-browser.html b/examples/layout-browser/layout-browser.html
index 2ac1d31..b888ae5 100644 (file)
--- a/examples/layout-browser/layout-browser.html
+++ b/examples/layout-browser/layout-browser.html
@@ -1,37 +1,58 @@
 <html>\r
 <head>\r
 <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
     <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
     <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
     <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
 </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
         <!-- 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
                 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
         <!-- 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
             CSS-style absolute positioning via XY coordinates.</p>\r
             <p><b>Sample Config:</b></p>\r
             <pre><code>\r
@@ -47,7 +68,7 @@ items:[{
         </div>\r
         <div id="accordion-details">\r
             <h2>Ext.layout.Accordion</h2>\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 &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
             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
@@ -56,7 +77,7 @@ items:[{
     title: 'Panel 1',\r
     html: 'Content'\r
 },{\r
     title: 'Panel 1',\r
     html: 'Content'\r
 },{\r
-    title: 'Panel 2,\r
+    title: 'Panel 2',\r
     id: 'panel2',\r
     html: 'Content'\r
 }]\r
     id: 'panel2',\r
     html: 'Content'\r
 }]\r
@@ -79,8 +100,8 @@ items:[{
             <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>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
             same relative dimensions.</p>\r
             <p><b>Sample Config:</b></p>\r
             <pre><code>\r
@@ -147,7 +168,7 @@ items: [{
             <p><b>Sample Config:</b></p>\r
             <pre><code>\r
 xtype: 'tabpanel',\r
             <p><b>Sample Config:</b></p>\r
             <pre><code>\r
 xtype: 'tabpanel',\r
-activeItem: 0, // index or id\r
+activeTab: 0, // index or id\r
 items:[{\r
     title: 'Tab 1',\r
     html: 'This is tab 1 content.'\r
 items:[{\r
     title: 'Tab 1',\r
     html: 'This is tab 1 content.'\r
@@ -195,7 +216,7 @@ items: [{
             <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
             <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
             should add up to 1 (100%) in order to fill the container.</p>\r
             <p><b>Sample Config:</b></p>\r
             <pre><code>\r
@@ -288,14 +309,56 @@ items: [
             </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
             </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
         <!-- 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
             <p><b>Sample Config:</b></p>\r
             <pre><code>\r
 layout:'ux.row',\r
@@ -315,10 +378,11 @@ items: [{
         </div>\r
         <div id="center-details">\r
             <h2>Ext.ux.layout.CenterLayout</h2>\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
             <p><b>Sample Config:</b></p>\r
             <pre><code>\r
 layout:'ux.center',\r
@@ -329,25 +393,27 @@ items: {
 }\r
             </code></pre>\r
         </div>\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
         <!-- 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
         </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
         <!-- Form layouts -->\r
         <div id="abs-form-details">\r
             <h2>Absolute Layout Form</h2>\r
Mirror of ExtJS by Sencha Inc. <http://www.sencha.com/>.