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.


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. Successfully implement the ExtJS JavaScript solutions in front-end applications.
  2. Utilize different ExtJS core functions including Ajax, DOM, and Event utilities.
  3. Incorporate (and extend) various components and layouts into applications.
  4. Customize and optimize solutions for tailored use.
  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. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. Introducing Data Components
    1. 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 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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:

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

Excellent teacher!
Gene Mitchell
US Courts
Webucator gave me more extension information for a Site Administrator than I have received anywhere else.
Kristy Usnick
National Renewable Energy Laboratory
This is by far the best Adobe class I have EVER taken -- and I have taken several -- Thank you!
Andrea Perry-Scardina
Our instructor was fantastic! He taught us many real world examples of how to start tackling our problems!
Jeff Butler

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 Advanced JavaScript: Using Ext JS 4 trainers 6.67 out of 10 based on 5 reviews

Contact Us or call 1-877-932-8228