426 lines
16 KiB
HTML
426 lines
16 KiB
HTML
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>ExtJS Layout Examples</title>
|
|
|
|
<!-- ** CSS ** -->
|
|
<!-- base library -->
|
|
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
|
|
|
|
<!-- overrides to base library -->
|
|
<link rel="stylesheet" type="text/css" href="../ux/css/CenterLayout.css" />
|
|
|
|
<!-- page specific -->
|
|
<link rel="stylesheet" type="text/css" href="layout-browser.css">
|
|
|
|
<!-- ** Javascript ** -->
|
|
<!-- ExtJS library: base/adapter -->
|
|
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
|
|
|
|
<!-- ExtJS library: all widgets -->
|
|
<script type="text/javascript" src="../../ext-all.js"></script>
|
|
|
|
<!-- overrides to base library -->
|
|
|
|
<!-- extensions -->
|
|
<script type="text/javascript" src="../ux/CenterLayout.js"></script>
|
|
<script type="text/javascript" src="../ux/RowLayout.js"></script>
|
|
|
|
<!-- 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 id="header"><h1>Ext Layout Browser</h1></div>
|
|
<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.AbsoluteLayout</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://extjs.com/deploy/dev/docs/?class=Ext.layout.AbsoluteLayout" target="_blank">API Reference</a></p>
|
|
</div>
|
|
<div id="accordion-details">
|
|
<h2>Ext.layout.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://extjs.com/deploy/dev/docs/?class=Ext.layout.Accordion" target="_blank">API Reference</a></p>
|
|
</div>
|
|
<div id="anchor-details">
|
|
<h2>Ext.layout.AnchorLayout</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://extjs.com/deploy/dev/docs/?class=Ext.layout.AnchorLayout" target="_blank">API Reference</a></p>
|
|
</div>
|
|
<div id="border-details">
|
|
<h2>Ext.layout.BorderLayout</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://extjs.com/deploy/dev/docs/?class=Ext.layout.BorderLayout" target="_blank">API Reference</a></p>
|
|
</div>
|
|
<div id="card-tabs-details">
|
|
<h2>Ext.layout.CardLayout (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://extjs.com/deploy/dev/docs/?class=Ext.layout.CardLayout" target="_blank">CardLayout API Reference</a></p>
|
|
<p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.TabPanel" target="_blank">TabPanel API Reference</a></p>
|
|
</div>
|
|
<div id="card-wizard-details">
|
|
<h2>Ext.layout.CardLayout (Wizard)</h2>
|
|
<p>You can use a CardLayout 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://extjs.com/deploy/dev/docs/?class=Ext.layout.CardLayout" target="_blank">API Reference</a></p>
|
|
</div>
|
|
<div id="column-details">
|
|
<h2>Ext.layout.ColumnLayout</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://extjs.com/deploy/dev/docs/?class=Ext.layout.ColumnLayout" target="_blank">API Reference</a></p>
|
|
</div>
|
|
<div id="fit-details">
|
|
<h2>Ext.layout.FitLayout</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://extjs.com/deploy/dev/docs/?class=Ext.layout.FitLayout" target="_blank">API Reference</a></p>
|
|
</div>
|
|
<div id="form-details">
|
|
<h2>Ext.layout.FormLayout</h2>
|
|
<p>FormLayout has specific logic to deal with form fields, labels, etc. While you can use a FormLayout in
|
|
a standard panel, you will normally want to use a FormPanel directly in order to get form-specific functionality
|
|
like validation, submission, etc. FormPanels use a FormLayout internally so the layout config is not needed
|
|
(and the layout may not render correctly if overridden).</p>
|
|
<p><b>Sample Config:</b></p>
|
|
<pre><code>
|
|
xtype: 'form', // FormPanel
|
|
labelWidth: 75,
|
|
width: 350,
|
|
defaultType: 'textfield',
|
|
items: [{
|
|
fieldLabel: 'First Name',
|
|
name: 'first',
|
|
allowBlank:false
|
|
},{
|
|
fieldLabel: 'Last Name',
|
|
name: 'last'
|
|
},{
|
|
fieldLabel: 'Company',
|
|
name: 'company'
|
|
},{
|
|
fieldLabel: 'Email',
|
|
name: 'email',
|
|
vtype:'email'
|
|
}
|
|
],
|
|
buttons: [
|
|
{text: 'Save'},
|
|
{text: 'Cancel'}
|
|
]
|
|
</code></pre>
|
|
<p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.layout.FormLayout" target="_blank">API Reference</a></p>
|
|
</div>
|
|
<div id="table-details">
|
|
<h2>Ext.layout.TableLayout</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:'table',
|
|
layoutConfig: {
|
|
columns: 3
|
|
},
|
|
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://extjs.com/deploy/dev/docs/?class=Ext.layout.TableLayout" target="_blank">API Reference</a></p>
|
|
</div>
|
|
|
|
<div id="vbox-details">
|
|
<h2>Ext.layout.VBoxLayout</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:'vbox',
|
|
layoutConfig: {
|
|
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://extjs.com/deploy/dev/docs/?class=Ext.layout.VBoxLayout" target="_blank">API Reference</a></p>
|
|
</div>
|
|
|
|
<div id="hbox-details">
|
|
<h2>Ext.layout.HBoxLayout</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:'hbox',
|
|
layoutConfig: {
|
|
align : 'stretch',
|
|
pack : 'start',
|
|
},
|
|
items: [
|
|
{html:'panel 1', flex:1},
|
|
{html:'panel 2', width:150},
|
|
{html:'panel 3', flex:2}
|
|
]
|
|
</code></pre>
|
|
<p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.layout.HBoxLayout" target="_blank">API Reference</a></p>
|
|
</div>
|
|
|
|
|
|
<!-- Custom layouts -->
|
|
<div id="row-details">
|
|
<h2>Ext.ux.layout.RowLayout</h2>
|
|
<p>This is a custom layout that is useful when you need a layout style with multiple rows of content.
|
|
Any fixed-height rows are calculated first, then any percentage-height rows specified using the
|
|
<tt>rowHeight</tt> config will be calculated based on remaining container height. Percentages
|
|
should add up to 1 (100%) in order to fill the container. Standard panel widths (fixed or
|
|
percentage) are also supported.</p>
|
|
<p><b>Sample Config:</b></p>
|
|
<pre><code>
|
|
layout:'ux.row',
|
|
items: [{
|
|
title: 'Height = 25%',
|
|
rowHeight: .25,
|
|
width: '50%'
|
|
},{
|
|
title: 'Height = 100px',
|
|
height: 100,
|
|
width: 300
|
|
},{
|
|
title: 'Height = 75%',
|
|
rowHeight: .75
|
|
}]
|
|
</code></pre>
|
|
</div>
|
|
<div id="center-details">
|
|
<h2>Ext.ux.layout.CenterLayout</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 width specified (fixed or percentage).
|
|
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',
|
|
width: '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>
|