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
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