Ext JS 4.0 components and layouts


Published on

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

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Ext JS 4.0 components and layouts

  1. 1. Components and Layouts
  2. 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. 3. Terms we’ll master•Component•Container•ComponentLayout•ContainerLayout
  4. 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. 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.ToolAbstractComponent 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. 6. Relax!
  7. 7. We’ll be focusing on these :) AbstractComponent Component container.AbstractContainer Container panel.AbstractPanel Panel
  8. 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. 9. Ext JS 4 Component Lifecycle• Broken into three phases: Initialization Render Destruction
  10. 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. 11. Initialization phase steps1. Configuration object is applied and cached2. Base events are added 1. before activate, beforeshow, show, render, etc.3. ID is assigned or auto generated4. Plugins are constructed (think ptypes or aliases)
  12. 12. Initialization phase steps (cont.)5. initComponent is executed 1. Custom listeners are applied 2. ‘bubbleEvents’ are initialized6. Component is registered with ComponentManager
  13. 13. Initialization phase steps (cont.)7. Base mixin constructors are executed 1. Observable’s constructor is called 2. State’s constructor is called8. Plugins are initialized9. Component Loader is initialized (not Ext.Loader!)10. If configured, Component is rendered (renderTo, applyTo)
  14. 14. Initialization phase steps (cont.)11. If configured, Component is shown12. Plugins are initialized13. Component Loader is initialized (not Ext.Loader!)14. If configured, Component is rendered (renderTo, applyTo)15. If configured, Component is shown
  15. 15. Render phase steps1. ‘beforerender’ event is fired2. Component’s element is cached as the ‘el’ reference3. If a floating Component, floating is enabled and registered with WindowManager4.The Comonent’s container element is initialized
  16. 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. 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. 18. Render phase steps (cont.)6. Element’s visibility mode is set via the hideMode attribute7. if overCls is set, mouseover/out events are hooked8. render event is fired9. Component’s contents is initialized (html, contentEl, tpl/data)
  19. 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. 20. Render phase steps (cont.)11. afterrender event is fired12. afterRender events are hooked into the cmp’s Element.13. Component is hidden if configured14. Component is disabled if configured
  21. 21. Destruction phase steps1. beforedestroy event is fired2. If floating, the component is deregistered from floating manager3. Component is removed from its parent container4. Element is removed from the DOM 1. element listeners are purged
  22. 22. Destruction phase steps (cont.)6. onDestroy is called7.Plugins are destroyed8. Component is deregistered from ComponentManager9. destroy event is fired10. State mixin is destroyed11. Component listeners are purged
  23. 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. 24. Container events• Has own events that you can hook • add • remove • afterlayout • cardswitch
  25. 25. Creating a simple container
  26. 26. Layouts
  27. 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. 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. 29. Layout Inheritance Draw Body Fieldset AutoLayout BoundList AbstractDock Dock layout.component Component Editor File Progressbar HtmlEditorlayout.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. 30. C’mon! It’s not that bad!
  31. 31. We’ll be focusing on these :) Field Dock Column Auto Table Abstract Fit FitContainer Border HBox Box VBox Accordion Anchor Absolute
  32. 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. 33. Column Layout• Extends AutoLayout• Manages Width of child items• Allows wrapping of child items• Does not size children vertically
  34. 34. Fit Layout• Extends Container Layout• Designedto size a single child item to the full size of a Container• *does not allow scrolling
  35. 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. 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. 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. 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. 39. align configuration property• Controls how items are aligned• HBox: • top, middle, stretch, stretchmax• VBox: • left, center, stretch, stretchmax
  40. 40. pack configuration property• Controls how items are packed together: • start, middle, end
  41. 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