Exceptional training for front end developers

Ext JS Training Course

12 Nov London
request info

Capita Marks and Spencer Telefonica Cisco BBC Lloyds Sony

Ext JS training course (code: EXTJSINT)

Develop Versatile, Modern Web Applications With ExtJS



Our Ext JS training course is expert-led and designed to teach you how to use this JavaScript application framework for building interactive cross platform web applications using techniques such as Ajax, DHTML and DOM scripting.





Day 1

Session 1: Introducing the Course

  • About the Course 
  • Course Objectives 
  • Course Prerequisites 
  • Required Software 
  • Optional Software 
  • Course Outline


Session 2: Getting Started with Ext JS 4.1

  • Obtaining Ext JS 4.1
  • The structure of the Ext JS installation
  • Configuring an IDE to work with Ext JS 4.1 
  • NetBeans used by default
  • The meaning of the different .js files provided
  • The Sencha Platform (and Sencha Touch)
  • Ext JS 4.1 online Resources


Session 3: Writing your first Ext JS Application

  • Structuring your web page
  • Writing Ext JS program
  • A simple Hello World application using Ext JS 4.1
  • Practical


Session 4: Classes in Ext JS 4.1

  • Defining a Class (Ext.define)
  • Creating new objects (Ext.create)
  • Automatically generating getters and setters with the config property 
  • Understanding the Ext Core 
  • Core packages and namesapces
  • Statics
  • Practical


Session 5: Existing classes and packages

  • Dynamic Class loading 
  • Ext.require v. Ext.uses
  • Core classes and packages


Day 2

Session 6: Classes Part 2: Constructors, Mixins and Inheritance

  • Extending a Class 
  • Constructors
  • Invoking parent class constructors 
  • Introducing Mixins


Session 7: The Data Package

  • Overview of Ext.data package
  • The Model class
  • Defining Models
  • Model Field types Ext.data.Types 
  • Validating the Model Ext.data.validations
  • Defining Associations between Models (belongsTo, hasMany)
  • Practical


Session 8: Stores and Proxies (1)

  • Overview of Stores 
  • holders of instances of models
  • managers of models
  • Defining Stores (Ext.data.Store)
  • Using proxies with Stores
  • The Ext.data.proxy package
  • Client Proxies (hierarchy and concrete classes)
  • LocalStorageProxy, SessionStorageProxy, MemoryProxy
  • Readers (Ext.data.reader)
  • Writers (Ext.data.writer)
  • Practical


Session 9: Stores and Proxies (2)

  • Server Proxies (hierarchy and concrete classes)
  • Ajax Proxy, Rest Proxy, JsonP Proxy
  • Sorting
  • Filtering


Session 10: Persisting UI State

  • Stateful Components 
  • Provider vs. Manager 
  • Setting a Provider 
  • Application Specific State Management 


Day 3

Session 11: Charts

  • Ext.window
  • The Chart class
  • Its constituent parts
  • Sample charts
  • Bar Chart / Grouped Bar Chart
  • Column Chart
  • Line Chart / Grouped Line Chart
  • Area Chart / Grouped Area Chart
  • Scatter Chart / Grouped Scatter Chart
  • Pie Chart / Donut Chart
  • Radar Chart / Gauge Chart
  • Practical


Session 12: Event Handling

  • Events in Ext & DOM Events 
  • Observable classes 
  • Custom Events 
  • Event Handlers & Delegated Event Handling 
  • Practical


Session 13: Containers, Panels and Layouts

  • Containers and Panels
  • Container Layouts
  • Container Layout Hierarchy
  • Sample layouts
  • Fit Layout / Border Layout / Card Layout
  • Auto Layout / Anchor Layout
  • Hbox Layout / Vbox Layout
  • Accordion Layout / Column Layout / Table Layout
  • Absolute Layout
  • The Ext.ComponentManager class
  • The Ext.ComponentQuery class
  • Ext.container.Container functions 
  • query, child, down and up
  • Practical


Session 14: Component Layouts

  • Component Layouts overview
  • Review of Layouts
  • Dock Layout / Tool Lay0ut / Field Layout / TriggerField Layout
  • Commonly used panels layout combinations
  • Viewport / TabPanel / GridPanel / FormPanel
  • Practical


Day 4

Session 15: Working with Grids

  • Grids the very idea
  • Columns
  • Feature support
  • Grouping, Grouping Summary, Summary, RowBody
  • Grid Plugins
  • Cell editing, Row Editing
  • Storing data to a server
  • Infinite Scrolling
  • Practical


Session 16: Working with Trees

  • The Tree panel
  • Check trees
  • Tree grid
  • Drag and Drop
  • Sorting within the tree
  • Practical


Session 17: Working with Forms

  • Forms overview
  • Form fields
  • FormPanel vs. BasicForm 
  • Form label
  • Applying Validation processing
  • Actions
  • Using Field as Mixin 
  • Practical
  • Introducing the Course
  • Getting Started with Ext JS 4.1
  • Writing your first Ext JS Application
  • Classes in Ext JS 4.1
  • Existing classes and packages
  • Classes Part 2: Constructors, Mixins and Inheritance
  • The Data Package
  • Stores and Proxies (1)
  • Stores and Proxies (2)
  • Persisting UI State
  • Charts
  • Event Handling
  • Containers, Panels and Layouts
  • Component Layouts
  • Working with Grids
  • Working with Trees
  • Working with Forms
Receive the latest version of this course into your inbox

See why people choose JBI

"At jbi even the sales team are technical so you are able to ask questions before the course"

Garima Aon

Blog (Show All)

JBI training course London UK

Shelf Life - are React and Angular frameworks here to stay?

12/02/2018: Your choice of development framework will have long term repercussions for IT and corporate strategy for years to come. When migrating and upgrading...

JBI training course London UK

React vs Angular - which framework and therefore which Training Course?

16/01/2018: React vs Angular which framework best for my organisation Speed, security and extensibility are the hallmarks of a great web service, and your...

JBI training course London UK

Angular Course | Expand your HTML capabilities with Angular

09/01/2018: Using HTML is a great way to build static web pages that hardly need any movement or adaptability, but every time a dynamic environment is required,...

Case Studies (Show All)

JBI training course London UK

React Training Course for Experienced Javascript Developers

05/07/2018: This Client asked JBI to run an intensive ReactJS course for Developers who were already familiar with Javascript, CSS and some of whom may have...

JBI training course London UK

Online fashion house gets intensive React training course in 2 days

06/02/2018: Originating from Facebook, React is a component based front-end library that allows you to build applications out of a tree of small, testable,...

JBI training course London UK

Android Training Course - customised and run onsite

08/01/2018: Knowing you need an app is one thing, making it happen should be as painless as possible. When a team of experienced developers needed to work...


12th Nov 2018 - 4 days £1795

see all dates


Show Discount for this course


  Bring a JBI course to your office
  and train a whole team onsite
  0800 028 6400
or request quote

  You can customise this course to
  suit your exact needs here
  0800 028 6400 or request quote

Get in touch
0800 028 6400

Excellent feedback, consistently !

►"great tips help reduce build times"
► "we got access to exclusive content"
► "Short course meant less time off"

►"what an inspiring trainer !"
► "colleagues at 2 sites joined via web"
► "I passed my exam the next day"

Newsletter ! Get exclusive news about upcoming programs, technical insights & special offers