Learning Objectives

JavaScript is a lightweight programming language that runs in a web browser on the client side, and is an easy way to add dynamic function to your HTML code. This course Introduction to JavaScript and ExtJS will introduce client-side web development using JavaScript, CSS and client-side development. This course also provides extended coverage of the Ext JS framework. It includes custom component creation, creating Ext themes using CSS, and UI prototyping. The course includes intensive hands-on labs and by the end of the course, you will have built a functioning user interface with Ext JS which connects to live data feeds using JSON. The hands-on sessions will provide in-depth coverage of the Ext JS framework and UI components. This course is conducted by a Sencha Partner.  

Upon completion of this course, the participants will be able to:

* Understand how to develop dynamic web programs using JavaScript and CSS;
* Learn how to create Ext themes using CSS and UI prototyping;
* Build a functioning user interface with Ext JS;
* Design and implement common components in ExtJS;
* Setup, Maintain and Deploy JavaScript and CSS applications.
 

Course Topics

DAY 1:
CSS
* CSS Selectors
* Floats and CSS positioning
* CSS styling and shortcuts
* CSS specificity
JavaScript
* 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
* DOM API
* innerHTML
* Document fragments
Debugging and Tools
* Aptana
* Firefox
* Firebug
* Internet Explorer Developer Toolbar
* Safari Console

DAY 2:
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
Ajax
* Creating a Request
* Using Success & Failure callbacks
* Ext.Updater

DAY 3:
Ext.data Package
* Connection
* Readers
* Proxies
* Records
* Stores
Custom Components
*Extend Ext JS Components to create Custom Components
Build Live Ext JS Apps Fast with Ext Designer
* Rapidly create rich Ext JS interfaces with Ext Designer
* Create and Configure Components
* Create/Configure Data Stores
* Generate Code and JSON
* Implement Business Logic and Behavior
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

DAY 4:
Utility Functions
* Ext.apply and Ext.applyIf
* Function's defer and createDelegate
* Ext.util.Format
Creating & Extending Classes
* Creating a Class & Extending a Class
* Extending a Component
Internationalization
* Enabling Locale Support
* Supported Locales
* Globalizing your Components
Drag & Drop
Implement Custom Drag and Drop
Hands-on Experience w/ Common Components
* Viewport
* TabPanel
* GridPanel
* TreePanel
* FormPanel
Building a Theme
* Create custom themes
* Create and use sprites
* Override CSS to generate custom skins
Application Architecture
* Design or Refactor Applications
* Application Best Practices
Building Ext And Your Project
* Setup, Maintain and Deploy the JavaScript & CSS
* Generate Compressed JavaScript & CSS


 

Instructor

Audience

This course is intended for programmers, software developers & engineers and systems programmers, who want to learn client-side web development in JavaScript, CSS and ExtJS.
 

Details

Date(s):

Aug. 13-16, 2012 

Time:

9:00am to 5:00pm 

Venue:

Kuala Lumpur, near General Hospital or Kepong (Selayang)  (For courses in Singapore, click here)

Closing Date:

4 weeks before course commencement 

Course Fee:

RM 4000  

Registration fees inclusive of:

• Course materials

• Light refreshments

• Certificate of Completion

Laptop:

Note that all participants are requested to bring their own laptop to class. 

Online Registration

Register Online or email my@vibenet.com.sg

Payment Options

1. Online Payment (Visa / Mastercard / Amex / Paypal)

2. Invoice to Company (for Company Sponsored Participants)

3. Maybank Internet/ ATM transfer

Cancellation & Refund Policy

Participating Organizations

Defence Science and Technology Agency (DSTA)

ST Electronics (Info-Software Systems) Pte Ltd

Participant's Feedback

Gave introduction to JavaScript, AJAX, and ExtJS. Gain deeper knowledge on topics. - Senior Systems Specialist from ST Electronics (Info-Software Systems) Pte Ltd

The lab sessions are very useful for learning the framework and for future reference. - Engineer from Defence Science and Technology Agency (DSTA)