Sencha ExtJs Learning [part 1]

Layout and Container in ExtJs

By : Irfan Maulana

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.

Container hierarchy

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

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.

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.

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

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

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

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

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

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

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.

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

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

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

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

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

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

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.

Tips

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

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

Thanks for your attention.Presented by : Irfan Maulana

Contact me on :

Email : mazipanneh@gmail.comBlog : www.mazipanneh.wordpress.com