Date post: | 21-Oct-2014 |
Category: |
Technology |
View: | 2,772 times |
Download: | 1 times |
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