<!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 -->
|
<script type="text/javascript" src="../../examples/shared/include-ext.js"></script>
|
<script type="text/javascript" src="../../examples/shared/options-toolbar.js"></script>
|
|
<!-- example code -->
|
|
<link rel="stylesheet" type="text/css" href="layout-browser.css">
|
|
<!-- GC -->
|
|
|
<!-- 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',
|
bodyBorder: false,
|
defaults: {
|
collapsible: true,
|
split: true,
|
bodyPadding: 15
|
},
|
items: [{
|
title: 'Footer',
|
region: 'south',
|
height: 150,
|
minHeight: 75,
|
maxHeight: 250,
|
html: '<p>Footer content</p>'
|
},{
|
title: 'Navigation',
|
region:'west',
|
floatable: false,
|
margins: '5 0 0 0',
|
width: 175,
|
minWidth: 100,
|
maxWidth: 250,
|
html: '<p>Secondary content like navigation links could go here</p>'
|
},{
|
title: 'Main Content',
|
collapsible: false,
|
region: 'center',
|
margins: '5 0 0 0',
|
html: '<h1>Main Page</h1><p>This is where the main content would go</p>'
|
}]
|
</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>
|
