This document discusses layouts and containers in ExtJS. It explains that the layout system handles sizing and positioning of components. The most commonly used container is Panel, which extends container. Different layouts like absolute, border, vbox, hbox are described along with code samples. Tips mentioned include starting layout design from the base component due to nested nature of ExtJS layouts. The document ends with an exercise to create the given mockup layout using ExtJS.

1. Sencha ExtJs Learning[part 1]
Layout and Container in ExtJs
By : Irfan
Maulana

2. About Layouting in ExtJs
The layout system is one of the most
powerful parts of Ext JS. It handles the
sizing and positioning of
every Component in your application.

3. Container hierarchy
The most commonly used Container is Panel.
Or you can use container sometimes.

4. Which Container should I used ?
Published in https://mazipanneh.wordpress.com/2015/05/05/extjs-different-panel-vs-container/
Ext.panel.Panel is extends of container.
Panel more complex and heavier than container.

5. Container Layouts
Every container has a layout that manages the sizing and positioning of
its child Components
You must specify layout for all Container.
But default layout for all Containers is Auto Layout.
AutoLayout provides only a passthrough of any layout calls to any child
containers.

6. Component Layouts
Just like a Container’s Layout defines how a Container sizes and positions
its Component items, a Component also has a Layout which defines how it
sizes and positions its internal child items.
Component layouts are configured using the componentLayout config
option.
Generally, you will not need to use this configuration unless you are
writing a custom Component since all of the provided Components come
with their own layout managers.
Most Components use Auto Layout, but more complex Components will
require a custom component layout (for example a Panel that has a header,
footer, and toolbars).

7. Basic Ext Layout
Absolute
Accordion
Anchor
Border
Card
Column
Fit
Table
Vbox
Hbox
Sample page : http://dev.sencha.com/deploy/ext-4.0.0/examples/layout-browser/layout-
browser.html

8. Basic Ext Layout - 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 code
layout: 'absolute',
items:[
{
title: 'Panel 1',
x: 50,
y: 50,
html: 'Positioned at x:50, y:50‘
},{
title: 'Panel 2',
x: 125,
y: 125,
html: 'Positioned at x:125, y:125‘
}]
http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.layout.container.Absolute

9. Basic Ext Layout - 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 code
layout: 'accordion',
items:[
{
title: 'Panel 1',
html: 'Content'
},{
title: 'Panel 2',
id: 'panel2',
html: 'Content'
}]
// css
#panel2 .x-panel-body {
background:#ffe;
color:#15428B;
}
#panel2 .x-panel-header-text {
color:#555;
}
http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.layout.container.Accordion

10. Basic Ext Layout - 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.
//sample code
layout: 'anchor',
items: [{
title: 'Panel 1',
height: 100,
anchor: '50%'
},{
title: 'Panel 2',
height: 100,
anchor: '-100'
},{
title: 'Panel 3',
anchor: '-10, -262'
}]
http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.layout.container.Anchor-cfg-anchor

11. Basic Ext Layout - Border
This is a multi-pane, application-oriented UI layout style that supports multiple nested
panels, automatic bars between regions and built-in expanding and collapsing of regions.
//sample 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'http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.layout.container.Border

12. Basic Ext Layout - Border
Region of Border Layout :
North : Positions component at top.
South : Positions component at bottom.
East : Positions component at right.
West : Positions component at left.
Center : Positions component at the remaining space.
There must be a component with region: "center" in every
border layout.

13. Basic Ext Layout - Card
This layout manages multiple child Components, each fitted to the Container, where only a
single child Component can be visible at any given time.
This layout style is most commonly used for wizards, tab implementations, etc.
//sample code
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'
}]http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.layout.container.Card

14. Basic Ext Layout - Column
This is a useful layout style when you need multiple columns that can have varying
content height.
//sample 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'
}]
http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.layout.container.Column

15. Basic Ext Layout - 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 code
layout:'fit',
items: {
title: 'Fit Panel',
html: 'Content',
border: false
}
http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.layout.container.Fit

16. Basic Ext Layout - 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 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'}
]
http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.layout.container.Table

17. Basic Ext Layout - Vbox
A layout that arranges items vertically across a Container. This layout optionally divides
available vertical space between child items containing a numeric flex configuration.
//sample code
layout: {
type: 'vbox‘,
align : 'stretch',
pack : 'start',
},
items: [
{html:'panel 1', flex:1},
{html:'panel 2', height:150},
{html:'panel 3', flex:2}
]
http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.layout.container.VBox

18. Basic Ext Layout - Hbox
A layout that arranges items horizontally across a Container. This layout optionally divides
available horizontal space between child items containing a numeric flex configuration.
//sample code
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [
{html:'panel 1', flex:1},
{html:'panel 2', width:150},
{html:'panel 3', flex:2}
]
http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.layout.container.HBox

19. vBox – hBox Configuration
Align : Controls how the child
items of the container are
aligned.
Pack : Controls how the child
items of the container are
packed together.

20. Tips
Because ExtJs's layout is nested, so see the
raw design start from bigger (base)
component.

21. Exersice
Please make layout for this mockup in ExtJs’s ways.

22. Thanks for your attention.
Presented by : Irfan Maulana
Contact me on :
Email : mazipanneh@gmail.com
Blog : www.mazipanneh.wordpress.com