Course Description
ExtJS241 is a hands-on course providing in-depth coverage of the Ext JS 4.2 framework and UI components, including Charting, Grids, the Ext JS 4 Data Model, Forms, Layouts, and Theming. It is targeted at developers who have a solid understanding of JavaScript and CSS and who want become immediately productive with Ext JS.
This course includes custom component creation, and building Ext themes using SASS, Compass, SCSS, and CSS. 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.
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: 4 Days
Course Fee:
On-site at your location:
- INR 68,000/participant for first six participants
- INR 48,000/participant for seventh participant and beyond + taxes as applicable.
- INR 68,000/participant + taxes as applicable
Live Online Session:
- INR 68,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
- Ext 3 Compatibility
- Sandbox Mode
Fundamental Classes
- Ext.Element
- Ext.CompositeElement
- Ext.DomHelper
- Ext.DomQuery
Event Handling
- Events in Ext & 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
- 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
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
Theming
- Getting started with SASS
- Using Compass and SASS
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
Setup Requirements
Bring your own laptop (Mac or PC) with the following software installed:
- Ext JS 4.2
- Sencha Cmd
- XAMPP
- Aptana Studio 3
- Firefox
- Firebug
- Illuminations for Developers
- Chrome
- Check that Ruby 2 is installed (Ruby is only used to run compass, which is used for SASS Theming) and execute the command:
- On Mac: sudo gem install compass .
- On PC: gem install compass.