Scroll Top

EXTJS251-Sencha Fast Track to Ext JS 4 + Sencha Architect 3 Training

Course Description

This hands-on Fast Track course provides in-depth coverage of Ext JS 4 and Sencha Architect 3 including:

  • App Architecture and Sencha MVC
  • Developing complete Ext JS 4 Applications with Sencha Architect 3
  • Sencha Cmd
  • UI Components and Views
  • The Class System
  • Components,Containers and Layouts
  • Data Models, Stores, and Proxies
  • Data Aware Components
  • Grids, Trees, Data Views, Forms, Charts
  • Controllers
  • Theming
  • Production Builds.

This Fast Track course includes all of Essential Ext JS plus:

  • Model Associations, Trees, Grid Editing, Charting, Theming, DOM Manipulation, and more advanced MVC
  • Trees
  • Grid Editing
  • DOM Manipulation
  • Custom Component Development
  • Advanced MVC

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.

Developers report saving at least 3-4 weeks learning Ext JS by taking this course. Get on the Fast Track today!

Course Details

Pre-requisites:

  • Prior experience developing applications in JavaScript and HTML
  • Familiarity with JavaScript Object Notation (JSON)
  • Prior experience developing Cascading Style Sheets

Duration: 5 Days
Course Fee:
On-site at your location:

  • INR 80,000/participant for first six participants
  • INR 58,000/participant for seventh participant and beyond + taxes as applicable.
  • INR 80,000/participant + taxes as applicable

Live Online Session:

  • INR 80,000/participant + taxes as applicable

Location: On-site at your location,Open session, Live Online Training

Course Outline

Course outline
Introducing the Course
  • About the Course
  • Course Objectives
  • Course Prerequisites
  • Required Software
  • Optional Software
  • Course Format
  • Course Outline
  • Demonstration: Introducing the App

Getting Started with Ext JS 4

  • Reviewing the online docs
  • Loading the Library
  • Required files
  • Run your first ExtJS code
  • Detecting the browser and their capabilities

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

Laying out your GUI

  • Defining Panels
  • Docking
  • Headers
  • Tools
  • Resizing Panels
  • 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

  • Programatically 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
  • Ext.util.History – Browser Back/Forward buttons
  • Function
  • Other utilitye classes

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

Internationalization

  • Enabling Locale Support
  • Supported Locales
  • Globalizing your Components
  • Making your applications accessible with ARIA support

Drag & Drop

  • Implement Custom Drag and Drop

Theming

  • Getting started with SASS
  • Using Compass and SASS
  • ExtJS theme related variables

Application Architecture

  • Design and Refactor Applications
  • Application Best Practices
  • Introducing Sencha MVC
  • Introducing Sencha Command

Building Ext And Your Project

  • Setup, Maintain and Deploy the JavaScript & CSS
  • Generate Compressed JavaScript & CSS
  • Tools
Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.