Advanced JavaScript: Using Ext JS 5

This Advanced JavaScript: Using Ext JS 5 training class provides instruction and practical exercises using the Ext JS 5 JavaScript Library. It examines Ext JS 5 features such as the MVVM architecture, data binding, and migrating to the latest version. This course examines core library features including the use of the Ext Element object, event handling capabilities, and working with arrays, strings, and other data types. The course provides insight on using Ajax techniques such as JSON-P and CORS. It explores various layouts and containers and examines the data-driven TreePanels, ComboBoxes, and Charts. The course explores numerous techniques for working with the GridPanel, TabPanel, and the data access classes. An in-depth treatment of creating custom components is accompanied by hands-on exercises. Finally, discussions on the build and deployment features including the creation of SASS-based CSS themes it provided.

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 Ext JS library. Participants are responsible for being familiar with JavaScript concepts before taking this course.

Primary audience: Developers interested in leveraging Ext JS in Web Applications

Secondary: Server-side developers, other programmers interested in JavaScript or client-side frameworks


Public Classes: Delivered live online via WebEx and guaranteed to run . Join from anywhere!

Private Classes: Delivered at your offices , or any other location of your choice.

  1. Learn to successfully incorporate Ext JS 5 into front-end solutions.
  2. Learn to utilize different Ext JS core functions including Ajax, DOM, and event-based interactions.
  3. Learn to incorporate (and extend) numerous components and layouts into applications.
  4. Learn to create custom components.
  5. Learn to incorporate an MVVM and/or MVC architectures.
  1. 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. Encapsulation
    13. Self-Executing Functions
    14. Private and Privileged Properties
    15. Pseudo-private Properties
    16. Defining Application Modules
    17. Exercise – Implementing JavaScript Patterns
  2. Ext JS Basics
    1. Ext JS Overview
    2. Versions and Compatibilities
    3. Ext JS and Licensing
    4. Loading the Library
    5. Working with Ext JS
    6. The Underlying Core Library
    7. The Powerful Element Object
    8. Unwrapping the DOM Node from Element
    9. Event Handling and EventObject
    10. Events across browsers
    11. Selecting and Querying Nodes
    12. Creating Classes using Ext JS
    13. What is Sencha Architect?
    14. Introducing Sencha Architect
    15. Exercise – Setting Up and Working with Ext JS
  3. Ext JS Core
    1. Ext JS Namespace
    2. String, Date, Currency Formatting
    3. Introducing the DomHelper
    4. Selecting Nodes, Creating Queries
    5. Ext.on()
    6. Event Delegation, Ext JS 5 Event Delegation Model
    7. Classes and Inheritance
    8. Configs
    9. Working with Configs
    10. Exercise – Classes & Configs
  4. Introducing UI Components
    1. Creating Components
    2. Working with Forms
    3. Using FormLayouts
    4. Dealing with Label Sizes
    5. FormPanels
    6. Controlling Look and Feel
    7. bodyPadding
    8. Classes and Styles on Components
    9. Data Form Validation
    10. Submitting Forms Using Ajax
    11. Understanding xtypes
    12. Working with Events through Components
    13. Removing Events, Handling Events Once
    14. Firing Events, Deferred Event Handling
    15. Exercise – Creating Forms
  5. Ajax and Ext JS
    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. Ext JS and JSON-P
    11. CORS and Ext JS
    12. Creating Responsive Tab Panels
    13. Exercise – Using Tabs and Cross Domain Requests
  6. Working with Layouts
    1. Using Components
    2. Understanding the Ext JS Component Lifecycle
    3. Working with Panels
    4. Dynamically Loading Containers
    5. Ext JS Window Types
    6. Working with Layouts
    7. BorderLayouts
    8. Accordions
    9. Viewports
    10. Creating Responsive Solutions
    11. Exercise – Creating an Ext JS Layout
  7. Introducing Data Components
    1. Package
    2. Working with Model Components
    3. Creating Models
    4. Model Validation
    5. Managing Data with Sessions
    6. The Role of Stores/Proxies/Associations
    7. Establishing Data Stores
    8. Working with DataReaders
    9. Records
    10. Using an Ajax Proxy and JSONReader
    11. Xml Readers
    12. Incorporating Listeners
    13. Working with Comboboxes
    14. Using a RestProxy
    15. Exercise – Cascading Comboboxes
  8. 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. Other New Components: Tagfields, Segmented Buttons
    8. Exercise – Adding Panels and Toolbars
  9. Advanced Components
    1. Using XTemplates
    2. Executing XTemplates
    3. Working with DataViews
    4. Advanced DataView Concepts
    5. Animated DataViews
    6. Creating Custom Components
    7. Extending Components
    8. Custom Component Fields
    9. Component Lifecycle
    10. Dynamic TreePanels
    11. Trees and Checkboxes
    12. Breadcrumbs and Tablets
    13. Exercise – Incorporating XTemplates, Trees, Combos, and Custom Components
    14. Grids and Charting
    15. Creating the Basic Grid
    16. Defining Selection Models
    17. Editable Grids
    18. Dynamic Updates
    19. Paging Grids
    20. Using Widget Columns
    21. Grouping Operations
    22. Upgrading to the New Charts Package
    23. Ext JS 5 New Chart Series
    24. Creating Charts
    25. Supported Chart Types
    26. Exercise – Incorporating the Grid Component
  10. Using the Classic MVC Architecture
    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. View Controllers vs Controllers
    15. Using References in Controllers
    16. View-Controller Granularity
    17. Exercise – Creating an MVC App
  11. Using the MVVM Architecture
    1. What is an MVVM Approach?
    2. Project Structure
    3. Data Binding
    4. Working with ViewControllers
    5. Scoping: this and controller
    6. Defining ViewModels
    7. Model Validations
    8. Using Formulas
    9. Incorporating Stores and Models
    10. Combining MVC and MVVM Architectures
    11. Incorporating Routing
    12. Exercise – Implementing a Master Details Solution
  12. Themes, Testing, and Accessibility
    1. Creating Custom Themes
    2. Introducing SASS
    3. SASS Mixins
    4. SASS Variables
    5. Accessibility
    6. Localization
    7. Unit Testing with Jasmine
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:

  • JavaScript
  • Strong OO Skills, HTML, and 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:

Training for your Team

Length: 4 Days
  • Private Class for your Team
  • Online or On-location
  • Customizable
  • Expert Instructors

What people say about our training

The company was very organized in making sure I had the material and the headset as well as my computer set up so the course would run smoothly.
April Sedgwick
LISI Broker
A must take course!
Hector Gerena
I am so glad that Webucator does not cancel courses just because there is only one participant! I feel confident to deliver and exceed expectations!! Instructor was awesome.
Lashae Primus
Self (Primus Training & Consulting)
Webucator gave me the foundation and footing to confidently start using SQL queries.
Chantal Bradley

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing


Students who have taken Instructor-led Training


Organizations who trust Webucator for their Instructor-led training needs


Satisfaction guarantee and retake option


Students rated our trainers 9.30 out of 10 based on 30,178 reviews

Contact Us or call 1-877-932-8228