Components and Layouts

Agenda• Learn about Component Inheritance model

• Discuss Component Life Cycle

• Proper way to instantiate Components

• Learn about Component events

• Explore Layouts

• Learn some tricks of the trade

Terms we’ll master

•Component

•Container

•ComponentLayout

•ContainerLayout

What is (a) Component?

• A centralized class set that provides many of the essential Component-relate functionality

• This is the Component Life Cycle

• Introduces predictability and dependability across the UI framework

• *generally any descendant of Ext.AbstractComponent

Component Inheritance (~95% complete)

AbstractComponent Component

panel.AbstractPanel Panel

button.Button

Editor

flash.Component

form.field.Base

form.field.HtmlEditor

form.Label

grid.Scroller

Img

menu.Item

panel.Tool

picker.Color

picker.Date

picker.Month

ProgressBar

resizer.Handle

resizer.Splitter

toolbar.Fill

toolbar.Item

container.AbstractContainer

view.AbstractView

Container

Split

tab.Tab

toolbar.Toolbar.Button

grid.CellEditor

Checkbox

Display

Hidden

Text

slider.Multi

Radio

File

TextArea

Trigger

Picker

Spinner

ComboBox

Date

Time

CheckItem

SeparatorItem

toolbar.SeparatorItem

toolbar.Space

toolbar.TextItem

draw.Component

View

BoundList

Table

picker.Time

grid.View

tree.View

chart.Chart

chart.TipSurface

Table

grid.Panel

tree.Panel

container.ButtonGroup

form.Panel

tab.Panel

tip.Tip

window.Window

slider.Tip

Tooltip QuickTip

MessageBox

panel.header tab.Bar

Viewport

field.FieldSet

grid.header.Container

toolbar.Toolbar Paging

column.Column

property.HeaderContainer

form.FieldContainer CheckboxGroup RadioGroup

Relax!

We’ll be focusing on these :)AbstractComponent

Component

panel.AbstractPanel

Panel

container.AbstractContainer

Container

Ext JS 4 Component Lifecycle

• Abstract out common behaviors to a central location

• Adds dependability and predictability to the framework

• Extremely important to know for both extending widgets and developing more efficient applications

Ext JS 4 Component Lifecycle• Broken into three phases:

Initialization

Render Destruction

Purposes of these steps

• Initialization• Bootstrap the Component (Create ID, register with

ComponentMgr, etc).• Render

• Paint the Component on screen, hook element based events, use layouts to organize components

• Destruction• Wipe the Component from the screen, purge event

listeners

Initialization phase steps

1. Configuration object is applied and cached

2. Base events are added

1. before activate, beforeshow, show, render, etc.

3. ID is assigned or auto generated

4. Plugins are constructed (think ptypes or aliases)

Initialization phase steps (cont.)

5. initComponent is executed

1. Custom listeners are applied

2. ‘bubbleEvents’ are initialized

6. Component is registered with ComponentManager

Initialization phase steps (cont.)

7. Base mixin constructors are executed

1. Observable’s constructor is called

2. State’s constructor is called

8. Plugins are initialized

9. Component Loader is initialized (not Ext.Loader!)

10. If configured, Component is rendered (renderTo, applyTo)

Initialization phase steps (cont.)

11. If configured, Component is shown

12. Plugins are initialized

13. Component Loader is initialized (not Ext.Loader!)

14. If configured, Component is rendered (renderTo, applyTo)

15. If configured, Component is shown

Render phase steps

1. ‘beforerender’ event is fired

2. Component’s element is cached as the ‘el’ reference

3. If a floating Component, floating is enabled and registered with WindowManager

4.The Comonent’s container element is initialized

Render phase steps (cont.)

5. onRender is executed

1. Component’s element is injected into the DOM

2. Scoped reset CSS is applied if configured to do so

3. Base CSS classes and styles are applied

4. “ui” is applied

5.“frame” initialized

Render phase steps (cont.)

5. onRender is executed (cont.)

6. renderTpl is initialized

7. renderData is initialized

8. renderTpl is applied to Component’s element using renderData

9. Render selectors are applied

10. “ui” styles are applied

Render phase steps (cont.)

6. Element’s visibility mode is set via the hideMode attribute

7. if overCls is set, mouseover/out events are hooked

8. render event is fired

9. Component’s contents is initialized (html, contentEl, tpl/data)

Render phase steps (cont.)

10. afterRender is executed

1. Container Layout is initialized (AbstractContainer)

2. ComponentLayout is initialized (AbstractComponent)

3. Component’s size is set

4. If floating, component is moved in the XY Coordinate space

Render phase steps (cont.)

11. afterrender event is fired

12. afterRender events are hooked into the cmp’s Element.

13. Component is hidden if configured

14. Component is disabled if configured

Destruction phase steps

1. beforedestroy event is fired

2. If floating, the component is deregistered from floating manager

3. Component is removed from its parent container

4. Element is removed from the DOM

1. element listeners are purged

Destruction phase steps (cont.)

6. onDestroy is called

7.Plugins are destroyed

8. Component is deregistered from ComponentManager

9. destroy event is fired

10. State mixin is destroyed

11. Component listeners are purged

What is a Container?

• Extends Component

• Provide the means to manage child items

• Delegates rendering of children to a layout manager

• Has utility methods that you can use

• cascade, bubble, down, add, remove, insert

• doLayout called automatically upon add/remove/insert

Container events

• Has own events that you can hook

• add

• remove

• afterlayout

• cardswitch

Creating a simple container

Layouts

What’s new for Ext JS 4?• Component layouts - lots of

them!

• Container layouts - updated

• Layouts are faster, more feature rich!

• Can even animate size transitions

• Tons of new classes!

Two types of layouts!

• Component Layout

• Responsible for organizing HTML elements for a component

• Dock, Field, etc.

• Container Layout

• Responsible for organizing and managing the size of child components for a Container

layout.component

layout.container

AutoLayout

Component

Body

BoundList

AbstractDock Dock

Draw

Editor

Fieldset

Progressbar

Button Tab

component.field Field

File

HtmlEditor

Slider

Text

TextArea

Trigger

Container

Auto

AbstractContainer

Abstract Fit

Border

Box

HBox

VBox Accordion

Column

Table

Anchor

Fit

Absolute

layout.Layout

Layout Inheritance

C’mon! It’s not that bad!

Dock

Field

Container

Auto

Abstract Fit

Border

Box

HBox

VBox Accordion

Column

Table

Anchor

Fit

Absolute

We’ll be focusing on these :)

Auto Layout

•AutoLayout is the default layout

•This layout is relatively dumb

•Uses HTML to naturally size items

•Does not size children according to parent

• Important: You must configure another layout if you want dynamic sizing of child items.

Column Layout

•Extends AutoLayout

•Manages Width of child items

•Allows wrapping of child items

•Does not size children vertically

Fit Layout

•Extends Container Layout

•Designed to size a single child item to the full size of a Container

•*does not allow scrolling

Anchor Layout

•Extends Container Layout

•Designed to dynamically size 1+ child items in both height and width dimensions based on rules

• known as anchor “anchor”

•does allow scrolling

Absolute Layout

•Extends Anchor Layout

•Designed to dynamically position 1+ child items in both X and Y coordinate space

•Does not dynamically size children

•does allow scrolling

Border Layout

• Extends Container Layout, automatically sizing children

• Organizes child items into “regions”

• north, south, east, west

• Regions can be resizable or collapsible

• Requires a center region

BoxLayouts

• Box is extends Container, and is a base class for HBox VBox

• HBox organizes children in a horizontal row (side by side)

• VBox organizes them in a vertical stack

• useful layout configs: align, pack

• child configs: height, width, flex

Box

HBox VBox

align configuration property

• Controls how items are aligned

• HBox:

• top, middle, stretch, stretchmax

• VBox:

• left, center, stretch, stretchmax

pack configuration property

• Controls how items are packed together:

• start, middle, end

Anchor Layout

•Extends VBoxLayout

•Vertically stacks child items

•Allows one item to be expanded at a time

•Children must be Panels or descendants of panel!

•Does allow more than one item to be expanded