Welcome!
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!
Select a layout from the tree to the left to begin.
Ext.layout.container.Absolute
This is a simple layout style that allows you to position items within a container using CSS-style absolute positioning via XY coordinates.
Sample Config:
layout: 'absolute',
items:[{
title: 'Panel 1',
x: 50,
y: 50,
html: 'Positioned at x:50, y:50'
}]
Ext.layout.container.Accordion
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.
Sample Config:
layout: 'accordion',
items:[{
title: 'Panel 1',
html: 'Content'
},{
title: 'Panel 2',
id: 'panel2',
html: 'Content'
}]
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:
#panel2 .x-panel-body {
background:#ffe;
color:#15428B;
}
#panel2 .x-panel-header-text {
color:#555;
}
Ext.layout.container.Anchor
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.
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.
Sample Config:
layout: 'anchor',
items: [{
title: 'Panel 1',
height: 100,
anchor: '50%'
},{
title: 'Panel 2',
height: 100,
anchor: '-100'
},{
title: 'Panel 3',
anchor: '-10, -262'
}]
Ext.layout.container.Border
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.
Every border layout must at least have a center region. All other regions are optional.
Sample Config:
layout: 'border',
bodyBorder: false,
defaults: {
collapsible: true,
split: true,
bodyPadding: 15
},
items: [{
title: 'Footer',
region: 'south',
height: 150,
minHeight: 75,
maxHeight: 250,
html: 'Footer content
'
},{
title: 'Navigation',
region:'west',
floatable: false,
margins: '5 0 0 0',
width: 175,
minWidth: 100,
maxWidth: 250,
html: 'Secondary content like navigation links could go here
'
},{
title: 'Main Content',
collapsible: false,
region: 'center',
margins: '5 0 0 0',
html: 'Main Page
This is where the main content would go
'
}]
Ext.layout.container.Card (TabPanel)
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.
Sample Config:
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.'
}]
Ext.layout.container.Card (Wizard)
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).
Sample Config:
layout:'card',
activeItem: 0, // index or id
bbar: ['->', {
id: 'card-prev',
text: '« Previous'
},{
id: 'card-next',
text: 'Next »'
}],
items: [{
id: 'card-0',
html: 'Step 1'
},{
id: 'card-1',
html: 'Step 2'
},{
id: 'card-2',
html: 'Step 3'
}]
Ext.layout.container.Column
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 columnWidth config will be calculated based on remaining container width. Percentages should add up to 1 (100%) in order to fill the container.
Sample Config:
layout:'column',
items: [{
title: 'Width = 25%',
columnWidth: .25,
html: 'Content'
},{
title: 'Width = 75%',
columnWidth: .75,
html: 'Content'
},{
title: 'Width = 250px',
width: 250,
html: 'Content'
}]
Ext.layout.container.Fit
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.
Sample Config:
layout:'fit',
items: {
title: 'Fit Panel',
html: 'Content',
border: false
}
Ext.layout.container.Table
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.
Sample Config:
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'}
]
Ext.layout.container.VBox
A layout that allows for the vertical and horizontal stretching of child items, much like the container layout with size management.
Sample Config:
layout: {
type: 'vbox'
align : 'stretch',
pack : 'start',
},
items: [
{html:'panel 1', flex:1},
{html:'panel 2', height:150},
{html:'panel 3', flex:2}
]
Ext.layout.container.HBox
A layout that allows for the vertical and horizontal stretching of child items, much like the column layout but can stretch items vertically.
Sample Config:
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [
{html:'panel 1', flex:1},
{html:'panel 2', width:150},
{html:'panel 3', flex:2}
]
Ext.ux.layout.Center
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 border:false to the child config.
Sample Config:
layout:'ux.center',
items: {
title: 'Centered Panel',
widthRatio: 0.75,
html: 'Some content'
}
Tabs With Nested Layouts
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.
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.
Complex Layout
Absolute Layout Form
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.