-<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 — 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: '&laquo; Previous'\r
-},{\r
- id: 'card-next',\r
- text: 'Next &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 — 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: '&laquo; Previous'
+},{
+ id: 'card-next',
+ text: 'Next &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>
git.ithinksw.org / extjs.git / blobdiff