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.
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.
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).
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
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.