Ext JS Training Course

Day 1

Session 1: Introducing the Course

• About the Course 
• Course Objectives 
• Course Prerequisites 
• Required Software 
• Optional Software 
• Course Outline

Session 2: Getting Started with Ext JS 4.1

• Obtaining Ext JS 4.1
• The structure of the Ext JS installation
• Configuring an IDE to work with Ext JS 4.1 
• NetBeans used by default
• The meaning of the different .js files provided
• The Sencha Platform (and Sencha Touch)
• Ext JS 4.1 online Resources

Session 3: Writing your first Ext JS Application

• Structuring your web page
• Writing Ext JS program
• A simple Hello World application using Ext JS 4.1
• Practical

Session 4: Classes in Ext JS 4.1

• Defining a Class (Ext.define)
• Creating new objects (Ext.create)
• Automatically generating getters and setters with the config property 
• Understanding the Ext Core 
• Core packages and namesapces
• Statics
• Practical

Session 5: Existing classes and packages

• Dynamic Class loading 
• Ext.require v. Ext.uses
• Core classes and packages

Day 2

Session 6: Classes Part 2: Constructors, Mixins and Inheritance

• Extending a Class 
• Constructors
• Invoking parent class constructors 
• Introducing Mixins

Session 7: The Data Package

• Overview of Ext.data package
• The Model class
• Defining Models
• Model Field types Ext.data.Types 
• Validating the Model Ext.data.validations
• Defining Associations between Models (belongsTo, hasMany)
• Practical

Session 8: Stores and Proxies (1)

• Overview of Stores 
• holders of instances of models
• managers of models
• Defining Stores (Ext.data.Store)
• Using proxies with Stores
• The Ext.data.proxy package
• Client Proxies (hierarchy and concrete classes)
• LocalStorageProxy, SessionStorageProxy, MemoryProxy
• Readers (Ext.data.reader)
• Writers (Ext.data.writer)
• Practical

Session 9: Stores and Proxies (2)

• Server Proxies (hierarchy and concrete classes)
• Ajax Proxy, Rest Proxy, JsonP Proxy
• Sorting
• Filtering

Session 10: Persisting UI State

• Stateful Components 
• Provider vs. Manager 
• Setting a Provider 
• Application Specific State Management 

Day 3

Session 11: Charts

• Ext.window
• The Chart class
• Its constituent parts
• Sample charts
• Bar Chart / Grouped Bar Chart
• Column Chart
• Line Chart / Grouped Line Chart
• Area Chart / Grouped Area Chart
• Scatter Chart / Grouped Scatter Chart
• Pie Chart / Donut Chart
• Radar Chart / Gauge Chart
• Practical

Session 12: Event Handling

• Events in Ext & DOM Events 
• Observable classes 
• Custom Events 
• Event Handlers & Delegated Event Handling 
• Practical

Session 13: Containers, Panels and Layouts

• Containers and Panels
• Container Layouts
• Container Layout Hierarchy
• Sample layouts
• Fit Layout / Border Layout / Card Layout
• Auto Layout / Anchor Layout
• Hbox Layout / Vbox Layout
• Accordion Layout / Column Layout / Table Layout
• Absolute Layout
• The Ext.ComponentManager class
• The Ext.ComponentQuery class
• Ext.container.Container functions 
• query, child, down and up
• Practical

Session 14: Component Layouts

• Component Layouts overview
• Review of Layouts
• Dock Layout / Tool Lay0ut / Field Layout / TriggerField Layout
• Commonly used panels layout combinations
• Viewport / TabPanel / GridPanel / FormPanel
• Practical

Day 4

Session 15: Working with Grids

• Grids the very idea
• Columns
• Feature support
• Grouping, Grouping Summary, Summary, RowBody
• Grid Plugins
• Cell editing, Row Editing
• Storing data to a server
• Infinite Scrolling
• Practical

Session 16: Working with Trees

• The Tree panel
• Check trees
• Tree grid
• Drag and Drop
• Sorting within the tree
• Practical

Session 17: Working with Forms

• Forms overview
• Form fields
• FormPanel vs. BasicForm 
• Form label
• Applying Validation processing
• Actions
• Using Field as Mixin 
• Practical