Fast Track to Ext JS 4 + Sencha Architect

This class will help you build great Ext JS 6 apps for desktops and tablets. It provides in-depth coverage of Ext JS including: touch support for This class will help you build great Ext JS 4 apps for desktops. It provides in-depth coverage of Ext JS including: app architecture and Sencha MVC, developing Ext JS 4 apps with Architect 3, Sencha Cmd, data models, stores, and proxies, grids, and more.

Through intensive hands-on labs, you will learn application architecture best practices and build a functioning application with an Ext JS 4 user interface connecting to live data feeds using JSON.

Classroom - 5 full-day sessions
Online - 10 half-day sessions over 2 weeks

Classroom at your location or Online

You must bring your own laptop, Mac or PC.

$3,300/developer (6 person minimum)
$2,400/additional developer
Plus instructor travel for Private Classroom training

Course Outline

Introduction, demo: introducing the app

Getting Started with Ext JS 4

Reviewing the docs, loading the library, Ext JS 3 compatibility and sandbox mode

Application Architecture

Ext JS application design, Sencha MVC

Sencha Architect

Expediting the development of complete Ext JS 4 apps with Architect, creating MVC, data sources, and custom components

Fundamental Classes

Ext.Element, Ext.CompositeElement, Ext.DomHelper, Ext.DomQuery

Event Handling

Events in Ext JS & DOM Events, observable classes, custom events

Component Model

Overview, component manager, deferred rendering, component vs. element, component configuration

Laying Out Your GUI

Defining panels, docking, headers, tools, defining toolbars, defining layouts, HBOX, VBOX, splitter, tabs

Hands-on Experience w/ Common Components

Viewport, TabPanel, GridPanel, FormPanel

Working with Data

Defining models, validating your data, defining associations, defining proxies, defining stores, working with forms, understanding form layout, FormPanel vs. BasicForm, anchor, FieldContainer, using Field as Mixin, applying validations, synchronizing data to/from an application server, outputting data with DataView

Getting on the Grid

Introducing grid features, defining a read-only grid, editing within a grid

Visualizing Data

Programmatically drawing on a canvas, charting data

Persisting UI State

Stateful components, provider vs. manager, setting a provider, application specific state management

Utility Functions

Ext.apply, Ext.util.Format

Creating & Extending Classes

Creating a class & extending a class, extending a component, understanding the Ext Core, class system, class definition, class loading, mixins, statics, automatically generating getters and setters with the config property, using the Lang Package, parsing information about the browser with env


Enabling locale support, supported locales, globalizing your components


Getting started with Sass, using Compass and Sass

Application Architecture

Design and refactor applications, application best practices, introducing Sencha MVC, introducing Sencha Cmd

Building Ext And Your Project

Setup, maintain and deploy the JavaScript & CSS, generate compressed JavaScript & CSS

Upcoming Classes


  • Programming experience
  • Familiarity with JavaScript, JSON, HTML and CSS
1 Upcoming Class
Date Course ID Course info Duration Price