Course Outline
This is a hands on, highly practical course which introduces Ext JS 4.1; its core concepts, classes, package structures, mixins, inheritance and object instantiation. It also presents the Ext JS framework, UI components, Graphics and Sprites, Layouts, Charts, Forms and Grids. In particular we explore the Ext JS package and namespaces naming conventions and the Classes they contain. As part of this it introduces the Ext JS Data model approach and usage with a Store. It also introduces Ext JS 4 support for Ajax style applications using JSON and XML. As a practical course it also considers subjects such as IDE configuration for Ext JS 4, application structuring and application deployment issues.
Course Content
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
