Krishna Mohan Koyya

Proprietor and Principal Consultant

Glarimy Technology Services
krishna@glarimy.com | www.glarimy.com
Protocol
Please switch-off or mute your mobile phones
Please do not bring your regular work to the class
No cross discussions
Primarily demonstration based, not slides
Stop me for any questions
Visit http://www.glarimy.com/files/extjs for references
Visit http://www.glarimy.com for code samples
Timings: 9.30-17.30
Breaks: 11.15-11.30, 12.45-13.45 and 15.30-15.45

Lab Set-up
Windows or any other O/S of your choice
ExtJS 4.x
Notepad++ or any other editor of your choice
Google Chrome or any other browser of your choice
with debugger installed
Tomcat 6 or any other HTTP server of your choice
JDK 6, if required for your server
Schedule: Day-1
Overview of JavaScript, CSS and DOM
Asynchronous communication using AJAX, Web 2.0 with AJAX and JSON

Getting Started with Ext JS 4
Loading the Library
Application Architecture
Ext Application Design, Introducing Sencha MVC

Fundamental Classes
Ext.Element, Ext.CompositeElement, Ext.DomHelper, Ext.DomQuery

Event Handling
Events in Ext & DOM Events, Event Handlers & Delegated Event Handling

Creating & Extending Classes
Creating a Class & Extending a Class, Extending a Component, Class System, Class
Definition, Class Loading
Schedule: Day-2
Working with Data
Defining Models, Validating your Data, Defining Associations,
Defining Proxies, Defining Stores

Component Model
Overview, Component Manager, Component vs. Element, Component
configuration

Laying out your GUI
Defining Panels, Headers, Resizing Panels, Defining Toolbars

Defining Layouts and Panels
HBOX, VBOX, Tabs, Viewport, TabPanel, Tree Panel, GridPanel,
FormPanel

Schedule: Day-3
Form Components Overview
Checkbox, ComboBox, CompositeField, DateField,
DisplayField, Hidden, HtmlEditor, NumberField, Radio,
SliderField, TextArea, TextField

Working with Forms
Understanding Form Layout, Applying Validations, Form
wizards

Effects and animation
Drag and Drop
Schedule: Day-4
Introducing grid features
Defining a read-only grid, Editing within a grid, Pagination
and scrolling

Sencha MVC
Ext.applysmd, Ext.util.Format

Internationalization
Debugging
Logging
Customization
Performance

Trainer Introduction
Name: Krishna Mohan Koyya
Proprietor & Principal Consultant of Glarimy
Areas: Java, JEE, Web 2.0, Design & Architecture
Academics: B.Tech (ECE) and M.Tech (CST)
Development Experience: 10 years in Java & NMS
domain with Cisco, Wipro & HP
Training Experience: Since 2008
Recent Clients: Oracle, Bosch, McAfee, ADP and etc.,
Profile: http://www.glarimy.com/krishna.php


Schedule: Day-1
Overview of JavaScript, CSS and DOM
Asynchronous communication using AJAX, Web 2.0 with AJAX and JSON

Getting Started with Ext JS 4
Loading the Library
Application Architecture
Ext Application Design, Introducing Sencha MVC

Fundamental Classes
Ext.Element, Ext.CompositeElement, Ext.DomHelper, Ext.DomQuery

Event Handling
Events in Ext & DOM Events, Event Handlers & Delegated Event Handling

Creating & Extending Classes
Creating a Class & Extending a Class, Extending a Component, Class System, Class
Definition, Class Loading
Exploring Sencha ExtJS
A Javascript library for Web 2.0 development
Offers API for
Element Selection
DOM Manipulation
Style Manipulation
Event Handling
AJAX
Also offers pre-built UI Components
Layouts
Form Widgets and Application Widgets
Exploring Sencha ExtJS
Architecture
Ext Foundation: Ext class system
Ext Core: DOM, CSS, Event & AJAX API
Ext JS: UI Components
Distribution
File ext.js: Ext Foundation & Ext Core (Minified)
File ext-all.js: All three layers (Minified)
File xxx-debug.js: Without minification
File xxx-dev.js: Development distribution
The CSS files under resources/css
Available on CDN: http://cdn.sench.io

ExtJS Class System
Defining a class
Ext.define(name, properties_and_methods, callback)
Class name must not use Ext as the root
Instantiating a class
Ext.create(name, properties)
Applying properties
Ext.apply(this, properties || {})
Alias to the class name
Add alias property to the class definition



ExtJS Class System
Extending a parent
Add extend property to the class definition
Every class is an extension of Ext.Base
Mixing multiple classes
Add mixins property to the class definition
Each mixed-in class must have a reference name
Access properties using mixins of the object
This is a way to implement multiple inheritance




ExtJS Class System
Configuration
Add config property to the class
Setters and getters are automatically created
Call applyConfig() in the constructor function
Pass config values during instantiation
Validating before setting config value
applyXXX method with a return value
ExtJS Class System
Making a singleton
Set property singleton to yes
Class can not be instantiated
Normally used for class configurations
Static Members
Add statics property to the class
All instances share the same reference to statics
Use self operator on the objects to access statics
ExtJS Class System
Dynamic loading
Ext.Loader must be configured
Loader is disabled in ext-all.js
Loading the class
Using Ext.require() function
Loads the class asynchronously
Class name must match file name
Class namespace must match file path
Using the class
Within the Ext.onReady() function
Executed only after all the required classes are loaded
DOM Element Selection
Ext.Element
Encapsulates the DOM element
Ext.CompositElement
Encapsulates a collection of DOM elements
Operations are transmitted to all the elements within
Selecting elements
Ext.get(id or DOM reference)
Returns Ext.Element
Ext.select(selector expression)
Returns Ext.CompositElement

DOM Manipulation
Ext.Element offers several DOM manipulation API
getHTML/setHTML: gets or sets inner HTML
getAttribute/setAttribute: gets or sets the attribute value
getValue/setValue: gets or sets value
appendTo: append this element to the passed
appendChild: appends the passed element to self
child: selects the single direct child
contains: checks if it is the ancestor of the passed one
insertAfter/insertBefore/insertFirst
Consider using DOMHelper

Style Manipulation
Ext.Element offers several style manipulation API
addCls, hasCls, removeCls, replaceCls, toggleCls
Hide and show
setStyle and applyStyles

Event Handling
Ext.Element offers event handling API
Setting up listener
on(eventName, function(event, htmlElement, options),
[scope], [options]);
Shorthand: addListener
A JSON can be used for attaching multiple event listeners
Removing listener
un(eventName, cbHandler) or removeListener
Ext.EventManager can be handy
Event can be inspected for the target and other details

Lab Session
Demonstration: Online Library console application using
which a librarian should be able to add new titles to the
stock, view the titles and their details and order for new
titles.

Exercise : An E-mail client application using which the
mails and mail folders can be listed and new mails can be
composed and sent.

Assignment: Online Banking component using which the
customer can view the account details and request for
various services and track them.