Skip to content


Day One – For beginners

· CSS selectors
· Floats and CSS positioning
· CSS styling and shortcuts
· CSS specificity
· Basics Overview (variables, conditionals, operators, loops)
· Arrays and Objects
· Functions
· Closures
· setTimeout and setInterval
· this and object binding
· Dynamic function calls
· Asynchronous javascript and callbacks
· Error handling
Manipulating the DOM
· innerHTML
· Document fragments

Debugging and Tools
· Aptana
· Firefox
· Firebug
· Internet Explorer Developer Toolbar
· Safari Console

Day Two – For Basic ExtJs
Fundamental Classes
· Ext.Element
· Ext.CompositeElement
· Ext.DomHelper
· Ext.DomQuery

Event Handling
· Events in Ext
· DOM Events
· Observable classes
· Custom Events
· Event Handlers
· Delegated Event Handling

Component Model
· Overview
· Component Manager
· Deferred Rendering
· Component vs. Element
· Component configuration

Containers and Layout Management
· Containers
· Layout Managers

· Creating a Request
· Using Success & Failure callbacks
· Ext.Updater Package
· Connection
· Readers
· Proxies
· Records
· Stores
Templates & DataView
· Template
· XTemplate
· Storing Templates in Markup
· Member formatting functions
· Using Templates with a DataView

Persisting UI State
· Stateful Components
· Provider vs. Manager
· Setting a Provider
· Application Specific State Management

Utility Functions
· Ext.apply & Ext.applyIf
· Function’s defer and createDelegate
· Ext.util.Format

Creating & Extending Classes
· Creating a Class
· Extending a Class
· Extending a Component
· Ext.extend
· Ext.override

· Enabling Locale Support
· Supported Locales
· Globalizing your Components

Hands-on Experience with Common Components
· Viewport
· TabPanel
· GridPanel
· TreePanel
· FormPanel

Day 3 – For Advanced ExtJs Concepts

Custom Components
Do you have a widget that you need but is not already in the Ext JS framework? Work with the trainer to gather requirements about your widget and how to use Ext JS as the underlying foundation to develop your widget.
Building a Theme
Translate your designer’s dream into a full-blown theme for any Ext JS application. You will learn how to create custom themes for use with any project you develop in Ext JS. It includes creating and using sprites and how to override the relevant CSS to generate a skin for each widget.
Drag & Drop
Looking for a custom Drag & Drop implementation? Learn how to implement custom drag and drop for your application.
Application Architecture
Learn how to design or refactor an existing application to adhere to best practices. Creating a solid application architecture is critical in larger applications, particularly when many developers are involved in a single project. By following a consistent architecture you will write cleaner code which is easier to maintain. We will explore the development life-cycle of your project from whiteboard to implementation.
Building Ext and your Project
Learn how to setup, maintain and deploy the JavaScript & CSS for your project. Boost the loading time of your application by generating a single compressed version of your JavaScript & CSS. You will also learn how to slim down Ext JS by removing components which you are not using to maximize performance.

Other resources for learning, Experiments in Web Programming

The Document Object Model: an Introduction, by Peter-Paul Koch

JavaScript: The Definitive Guide, 4th Edition
Chapter 17: The Document Object Model

Traversing an HTML Table with JavaScript and DOM Interfaces
No comments yet

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: