Advanced JavaScript: Using Ext JS 4

This course provides instruction and practical exercises using the ExtJS 4 JavaScript Library.The first day of this course examines the core features of the library including the Ext Element object, event handling capabilities, and utilities such as those for working with arrays, strings, and other data types.The second day introduces ExtJS Ajax capabilities, layouts, Panels, form components, and DataViews and begins to introduce the data-riven components such as TreePanels and ComboBoxes.The third day places emphasis on using the GridPanel, TabPanels, and DataReaders.This day also features hands-on exercises for extending and creating custom components.Discussions on library loading techniques, performing custom builds, and creating custom themes also occur on this last day.

This course introduces modern practices of JavaScript, such as OOJS and the use of design patterns.Best practices are emphasized with the use of the ExtJS library.Participants are responsible for being familiar with JavaScript concepts before taking this course.

This course's primary audience is developers interested in leveraging ExtJS in Web Applications. Its secondary audience is server-side developers, other programmers interested in JavaScript, and client-side frameworks.

Goals

Successfully implement the ExtJS JavaScript solutions in front-end applications.
Utilize different ExtJS core functions including Ajax, DOM, and Event utilities.
Incorporate (and extend) various components and layouts into applications.
Customize and optimize solutions for tailored use.

Outline

Advanced Functions and OOJS Techniques
1. The ECMAScript Standard
2. Declaring Functions
3. Function Literal Notation
4. The Function Object
5. Variadic Functions
6. Advanced Argument Passing
7. Variables and Scope
8. Overloading Issues
9. The Global Namespace
10. Closures
11. The Object Prototype
12. Prototype Chaining
13. Encapsulation
14. Self-Executing Functions
15. Private and Privileged Properties
16. Pseudo-private Properties
17. The Module Pattern
18. Defining Application Modules
19. Exercise – Implementing JavaScript Patterns
ExtJS Basics
1. ExtJS Overview
2. Versions and Compatibilities
3. ExtJS and Licensing
4. Loading the Library
5. Working with ExtJS
6. The Underlying Core Library
7. Creating Classes the ExtJS 4 Way
8. Should you MVC?
9. Creating an MVC-based app
10. What is Sencha Architect?
11. Introducing Sencha Architect
12. Exercise – A First ExtJS Application
DOM, Events and Core Language Extensions
1. The Ext Global Object
2. Using DOMHelper
3. Working with DOMQuery
4. Selecting and Querying Nodes
5. The Powerful Element Object
6. Unwrapping the DOM Node from Element
7. The ExtJS EventObject
8. Event Handling and EventObject
9. Events across browsers
10. CSS and Box Model Manipulation
11. Number/Date/Currency/String Formatting
12. Working with Forms
13. Using Form Layouts
14. FormPanels
15. Data Form Validation
16. Exercise – Using Core ExtJS Features and Building Forms
Ajax: From Outside the UI
1. Introducing Ext.Ajax.request()
2. Handling Responses
3. Handling Errors
4. Passing Parameters
5. Setting Headers
6. Setting timeouts
7. Evaluating JSON Data
8. Understanding JSON-P
9. Dynamic Script Tags
10. ExtJS and JSON-P
11. CORS and ExtJS
12. Creating Tab Panels
13. Exercise – Using Tabs and Cross Domain Requests
Working with Layouts
1. Using Components
2. Understanding the ExtJS Component Lifecycle
3. Working with Panels
4. Dynamically Loading Containers
5. ExtJS Window Types
6. Working with Layouts
7. Border Layouts
8. Form Layouts
9. Accordions
10. Viewports
11. Exercise – Creating an ExtJS Layout
Introducing Data Components
1. Ext.data Package
2. Working with Model Components
3. Creating Models
4. Model Validation
5. The Role of Stores/Proxies/Associations
6. Establishing Data Stores
7. Working with Ext.data DataReaders
8. Records
9. Using an Ajax Proxy and JSONReader
10. Xml Readers
11. Incorporating Listeners
12. Working with Comboboxes
13. Using a RestProxy
14. Exercise – Cascading Comboboxes
Using Components
1. Components, Elements and Nodes
2. Rendering Components
3. More with Panels
4. Creating Toolbars and Actions
5. Using Tabs and TabPanels
6. Handling Custom Events
7. Exercise – Adding Panels and Toolbars
Advanced Components
1. What are Templates?
2. Using XTemplates
3. XTemplate Logic
4. Executing XTemplates
5. Working with DataViews
6. Advanced DataView Concepts
7. Animated DataViews
8. Creating Custom Components
9. Extending the Components
10. Custom Component Fields
11. The New Component
12. Component Lifecycle
13. Dynamic TreePanels
14. Trees and Checkboxes
15. Exercise – Creating a Tree Custom Component
More with Data-Driven Components
1. Creating the Basic Grid
2. Defining Selection Models
3. Editable Grids
4. Dynamic Updates
5. Paging Grids
6. Grouping Operations
7. Creating Charts
8. Supported Chart Types
9. Dynamically Updating Charts
10. Exercise – Incorporating the Grid Component
MVC
1. Incorporating the MVC Framework
2. MVC Project Structure
3. The Initial Page
4. The Application File
5. Defining Views
6. Creating a Controller
7. Initializing Event Handling
8. Handling Multiple Events
9. MVC Selectors
10. AutoCreating Views
11. Adding Controllers
12. Controller-to-Controller Communication
13. Adding Stores & Models
14. Using References in Controllers
15. View-Controller Granularity
16. Exercise – Creating an MVC App
Theming, Internationalization and Accessibility
1. Using Different Themes
2. Customizing Component Look and Feel
3. What is SASS?
4. Incorporating SASS
5. Creating New Themes
6. What is WAI and ARIA?
7. Improvements in Accessibility
8. Using the Keyboard
9. Supporting Locales
10. Animations and Visual Effects
11. Common Effects: Wipes, Fades, and Slides
12. Introducing Drag-and-Drop
13. Unit Testing

Class Materials

Each student in our Live Online and our Onsite classes receives a comprehensive set of materials, including course notes and all the class examples.

Class Prerequisites

Experience in the following is required for this JavaScript class:

Strong OO Skills.
HTML.
JavaScript language fundamentals such as DOM and event handling.

Experience in the following would be useful for this JavaScript class:

CSS Fundamentals are highly recommended.

Prerequisite Courses

Courses that can help you meet these prerequisites:

Preparing for Class

Onsite: Course Setup

Advanced JavaScript: Using Ext JS 4

Training for your Team

What people say about our training