1. Sencha ExtJS 4 Krishna Mohan Koyya Proprietor and Principal Consultant
Glarimy Technology Services |

2. 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 for references
Visit for code samples
Timings:
Breaks: , and

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

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

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

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

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

8. 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:

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

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

11. 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:

12. ExtJS Class System Defining a class Instantiating 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

13. ExtJS Class System Extending a parent Mixing multiple classes
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

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

15. ExtJS Class System Making a singleton Static Members
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

16. ExtJS Class System Dynamic loading Loading the class Using the class
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

17. DOM Element Selection Ext.Element Ext.CompositElement
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

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

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

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

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