In this presentation, Jay Garcia describes how Ext JS 4.0 layouts work from a fundamental level.

1. Components and Layouts

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

3. Terms we’ll master
•Component
•Container
•ComponentLayout
•ContainerLayout

4. What is (a) Component?
•Acentralized 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

5. Split
button.Button
tab.Tab
toolbar.Toolbar.Button
Component Inheritance
Editor
flash.Component
grid.CellEditor
Checkbox Radio
(~95% complete)
form.field.Base Display
form.field.HtmlEditor Hidden File
ComboBox
form.Label Text TextArea
Picker Date
grid.Scroller slider.Multi Trigger
Spinner Time
Img
CheckItem
menu.Item
SeparatorItem
panel.Tool
AbstractComponent Component picker.Color
picker.Date grid.Panel
Table
picker.Month tree.Panel
container.ButtonGroup
ProgressBar
form.Panel
resizer.Handle panel.AbstractPanel Panel
tab.Panel slider.Tip
resizer.Splitter toolbar.SeparatorItem panel.header tab.Bar
tip.Tip Tooltip QuickTip
toolbar.Fill toolbar.Space Viewport
window.Window MessageBox
toolbar.Item toolbar.TextItem field.FieldSet column.Column
container.AbstractContainer Container grid.header.Container property.HeaderContainer
view.AbstractView View toolbar.Toolbar Paging
draw.Component chart.Chart form.FieldContainer CheckboxGroup RadioGroup
chart.TipSurface BoundList picker.Time
Table grid.View
tree.View

6. Relax!

7. We’ll be focusing on these :)
AbstractComponent
Component
container.AbstractContainer
Container
panel.AbstractPanel
Panel

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

9. Ext JS 4 Component Lifecycle
• Broken into three phases:
Initialization
Render Destruction

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

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

12. Initialization phase steps (cont.)
5. initComponent is executed
1. Custom listeners are applied
2. ‘bubbleEvents’ are initialized
6. Component is registered with ComponentManager

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

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

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

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

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

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

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

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

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

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

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

24. Container events
• Has own events that you can hook
• add
• remove
• afterlayout
• cardswitch

25. Creating a simple container

26. Layouts

27. 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!

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

29. Layout Inheritance
Draw
Body Fieldset
AutoLayout
BoundList
AbstractDock Dock
layout.component Component Editor File
Progressbar HtmlEditor
layout.Layout
Button Tab Slider
layout.container component.field Field Text
TextArea
AbstractContainer Trigger
Column
Auto Table
Abstract Fit Fit
Container
Border HBox
Box VBox Accordion
Anchor Absolute

30. C’mon! It’s not that bad!

31. We’ll be focusing on these :)
Field
Dock
Column
Auto Table
Abstract Fit Fit
Container Border HBox
Box VBox Accordion
Anchor Absolute

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

33. Column Layout
• Extends AutoLayout
• Manages Width of child items
• Allows wrapping of child items
• Does not size children vertically

34. Fit Layout
• Extends Container Layout
• Designedto size a single child item to the full size of
a Container
• *does not allow scrolling

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

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

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

38. 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 Box
• useful layout configs: align, pack
HBox VBox
• child configs: height, width, flex

39. align configuration property
• Controls how items are aligned
• HBox:
• top, middle, stretch, stretchmax
• VBox:
• left, center, stretch, stretchmax

40. pack configuration property
• Controls how items are packed together:
• start, middle, end

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