Welcome!
-There are many sample layouts to choose from that should give you a good head start in building your own +
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.AbsoluteLayout
-This is a simple layout style that allows you to position items within a container using +
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:
@@ -47,7 +68,7 @@ items:[{
Ext.layout.Accordion
-Displays one panel at a time in a stacked layout. No special config properties are required other +
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:
@@ -56,7 +77,7 @@ items:[{
title: 'Panel 1',
html: 'Content'
},{
- title: 'Panel 2,
+ title: 'Panel 2',
id: 'panel2',
html: 'Content'
}]
@@ -79,8 +100,8 @@ items:[{
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
+
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:
@@ -147,7 +168,7 @@ items: [{
Sample Config:
xtype: 'tabpanel',
-activeItem: 0, // index or id
+activeTab: 0, // index or id
items:[{
title: 'Tab 1',
html: 'This is tab 1 content.'
@@ -195,7 +216,7 @@ items: [{
Ext.layout.ColumnLayout
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
+ 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:
@@ -288,14 +309,56 @@ items: [
Ext.layout.VBoxLayout
+A layout that allows for the vertical and horizontal stretching of child items, much like the container + layout with size management.
+Sample Config:
+
+layout:'vbox',
+layoutConfig: {
+ align : 'stretch',
+ pack : 'start',
+},
+items: [
+ {html:'panel 1', flex:1},
+ {html:'panel 2', height:150},
+ {html:'panel 3', flex:2}
+]
+ Ext.layout.HBoxLayout
+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:'hbox',
+layoutConfig: {
+ align : 'stretch',
+ pack : 'start',
+},
+items: [
+ {html:'panel 1', flex:1},
+ {html:'panel 2', width:150},
+ {html:'panel 3', flex:2}
+]
+ Ext.ux.layout.RowLayout
-This is a useful layout style when you need multiple rows of content. Any fixed-height rows are - calculated first, then any percentage-height rows specified using the rowHeight 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.
+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 + rowHeight 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.
Sample Config:
layout:'ux.row',
@@ -315,10 +378,11 @@ items: [{
Ext.ux.layout.CenterLayout
-A simple 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 border:false to the child config.
+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 border:false to the child config.
Sample Config:
layout:'ux.center',
@@ -329,25 +393,27 @@ items: {
}
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.
+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.