sencha extjs learning part 1 - layout and container in sencha extjs - by irfan maulana [english]
Post on 15-Aug-2015
110 Views
Preview:
TRANSCRIPT
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
top related