Layouts To understand various layouts extjs provides, and overview of some commonly used layouts

Component Model Component provides a unified model for component creation, rendering, event handling, state management and destruction, and every component in Ext that requires these features now extends Component. It is one of the most fundamental classes in the overall architecture.

Component Life Cycle: Initialization 1. The config object is applied 2. The base Component events are created 3. The component is registered in ComponentMgr 4. The initComponent method is called 5. Plugins are loaded (if applicable) 6. State is initialized (if applicable) 7. The component is rendered (if applicable)

Component Life Cycle: Rendering 1. The beforerender event is fired 2. The container is set 3. The onRender method is called 4. The Component is "unhidden" 5. Custom class and/or style applied 6. The render event is fired 7. The afterRender method is called 8. The Component is hidden and/or disabled (if applicable) 9. Any state-specific events are initialized (if applicable) 10. The afterrender event is fired

Component Life Cycle: Destruction 1. The beforedestroy event is fired 2. The beforeDestroy method is called 3. Element and its listeners are removed 4. The onDestroy method is called 5. Component is unregistered from ComponentMgr 6. The destroy event is fired 7. Event listeners on the Component are removed

Container Model Container Container is the most basic foundation for any component that will contain other components. It provides the layout and rendering logic needed for handling sizing and nesting of other components, and also provides the basic mechanism for consistently adding components to the container.. Panel Panel also provides the basic building blocks needed in an application UI. It has bottom and top bars for adding toolbars and menus, a header, footer and body. Panels can be easily dropped into any Container or layout. * GridPanel * TabPanel * TreePanel * FormPanel Window Window is a specialized Panel that also can be floated, minimized/maximized, restored, dragged, etc. Viewport The Viewport is a utility container class that automatically renders to the document body and sizes itself to the dimensions of the browser viewport.

Layouts note*: extjs 3-0 has added a BoxLayout subclass of ContainerLayout

Adding Layout layout: 'accordion', // The layout style to use in this panel layoutConfig: { animate: true // Layout-specific config values go here }

AbsoluteLayout This is a very simple layout that allows you to position contained items precisely via X/Y coordinates relative to the container. layout:'absolute', items: [{ x: 0, y: 5, xtype:'label', text: 'Send To:' },{ x: 0, y: 35, xtype:'label', text: 'Subject:' }]

AccordionLayout The AccordionLayout contains a set of vertically-stacked panels that can be expanded and collapsed to display content. Only one panel can be open at a time layout:'accordion', layoutConfig: { // layout-specific configs go here titleCollapse: false, fill: true, hideCollapseTool: true, collapseFirst: false, animate: true, activeOnTop: true }, items: [{ title: 'Panel 1', html: ' Panel content! ' },{ title: 'Panel 2', html: ' Panel content! ' },{ title: 'Panel 3', html: ' Panel content! ' }]

AnchorLayout This layout is for anchoring elements relative to the sides of the container. The elements can be anchored by percentage or by offsets from the edges, and it also supports a virtual layout canvas that can have different dimensions than the physical container. layout:'anchor', anchorSize: {width:800, height:600}, items:[{ title:'Item 1', html:'Content 1', anchor:'right 20%' // valid values right, bottom },{ title:'Item 2', html:'Content 2', anchor:'50% 30%' },{ title:'Item 3', html:'Content 3', anchor:' %' }]

BorderLayout This layout regions with built-in support for nesting, sliding panels open and closed and splitters separating regions. This is the most common layout style for the primary UI in typical business applications layout: 'border', items: [{ title: 'South Region is resizable', region: 'south', // position for region height: 100, split: true, // enable resizing minSize: 75, // defaults to 50 maxSize: 150, margins: ' ' },{ title: 'West Region is collapsible', region:'west', width: 200, collapsible: true, // make collapsible cmargins: ' ', // adjust top margin when collapsed },{ title: 'Center Region', region: 'center' // center region is required, no width/height specified }]

BorderLayout:Region cmargins An object containing margins to apply to the region when in the collapsed state respectively. collapseMode – undefined (default) – 'mini' collapsible true to allow the user to collapse this region margins An object containing margins to apply to the region when in the expanded state minHeight minWidth split

CardLayout CardLayout is a specific layout used in cases where a container holds multiple elements, but only a single item can be visible at any given time. layout:'card', layoutConfig: { deferredRender : false, layoutOnCardChange : true }, activeItem: 0, // make sure the active item is set on the container config! // the panels (or "cards") within the layout items: [{ id: 'card-0', html: ' Welcome to the Wizard! Step 1 of 3 ' },{ id: 'card-1', html: ' Step 2 of 3 ' },{ id: 'card-2', html: ' Congratulations! Step 3 of 3 - Complete ' }]

ColumnLayout This is the layout style of choice for creating structural layouts in a multi- column format where the width of each column can be specified as a percentage or pixel width, but the height is allowed to vary based on content. layout:'column', items: [{ title: 'Column 1', columnWidth:.25 },{ title: 'Column 2', columnWidth:.6 },{ title: 'Column 3', columnWidth:.15 }]

FitLayout This is a simple layout style that fits a single contained item to the exact dimensions of the container. This is usually the best default layout to use within containers when no other specific layout style is called for. layout:'fit', items: { title: 'Inner Panel', html: ' This is the inner panel content ', border: false }

FormLayout The FormLayout is a utility layout specifically designed for creating data entry forms. FormPanels must use layout:'form', so forms needing additional layout styles should use nested Panels to provide them. A Container using the FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form') can also accept the following layout-specific config properties: – hideLabels – labelAlign – labelPad – labelSeparator – labelWidth Any Component (including Fields) managed by FormLayout accepts the following as a config option: – anchor

layout: 'form', hideLabels: false, labelAlign: 'left', // or 'right' or 'top' labelSeparator: '>>', labelWidth: 65, // defaults to 100 labelPad: 8, items: [{ fieldLabel: 'First Name', name: 'first', labelSeparator: ':' // override labelSeparator layout config },{ fieldLabel: 'Last Name', name: 'last' },{ fieldLabel: ' ', name: ' ' }, { xtype: 'textarea', hideLabel: true,// override hideLabels layout config name: 'msg', anchor: '100% -53' } ]

TableLayout This layout style generates standard HTML table markup with support for column and row spanning. // // | A | B | // | | | // | | C | D | // layout:'table', layoutConfig: { columns: 3 }, items: [{ html: ' Cell A content ', rowspan: 2 },{ html: ' Cell B content ', colspan: 2 },{ html: ' Cell C content ' },{ html: ' Cell D content ' }]

HBoxLayout A layout that arranges items horizontally across a Container. l layout:'hbox', layoutConfig: { padding:'5', align:'stretch', //Controls how the child items of the container are aligned flex: 1, pack: 'start'//Controls how the child items of the container are packed together. }, items:[{ xtype:'button', text: 'Button 1' },{ xtype:'button', text: 'Button 2' },{ xtype:'button', text: 'Button 3' },{ xtype:'button', text: 'Button 4' }]

VBoxLayout A layout that arranges items vertically down a Container layout:'vbox', layoutConfig: { padding:'5', align:'left',//Controls how the child items of the container are aligned. flex: 1 // pack: 'start'//Controls how the child items of the container are packed together. }, items:[{ xtype:'button', text: 'Button 1' },{ xtype:'button', text: 'Button 2' },{ xtype:'button', text: 'Button 3' },{ xtype:'button', text: 'Button 4 }]